CSS列錯誤 - 5列數只顯示4（與圖像）

我想實現克里斯Coyier的example使用CSS列創建圖像的無縫響應網格。CSS列錯誤 - 5列數只顯示4（與圖像）

我把克里斯的文件放到我的服務器上，一切都很正常。我改變的唯一的事情是實際的圖像。

現在，正如您在我的上看到的那樣，只有4列圖像而不是指定5，使用column-count:5;。第五列只是沒有內容的空白。

這隻發生在瀏覽器窗口大於1200px的情況下。當瀏覽器窗口小於1200像素時，媒體查詢啓動並減少列數4，3，2，最後爲1.換句話說，只有在column-count:爲5或更高時纔會發生此錯誤

發生這種情況在FF 10中，Chrome 17+和Safari 5+。

任何幫助，將不勝感激！

這裏是修剪HTML：

<section id="photos"> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     ...      

</section>

這裏是不變的CSS：

* { margin: 0; padding: 0; } 

#photos { 
    /* Prevent vertical gaps */ 
    line-height: 0; 

    -webkit-column-count: 5; 
    -webkit-column-gap: 0px; 
    -moz-column-count: 5; 
    -moz-column-gap:  0px; 
    column-count:   5; 
    column-gap:   0px; 

} 
#photos img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
} 

@media (max-width: 1200px) { 
    #photos { 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count:   4; 
    } 
} 
@media (max-width: 1000px) { 
    #photos { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count:   3; 
    } 
} 
@media (max-width: 800px) { 
    #photos { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count:   2; 
    } 
} 
@media (max-width: 400px) { 
    #photos { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count:   1; 
    } 
}

來源

2012-02-15 davecave

我已經想通了，當瀏覽器窗口大於1200像素，'列數：7'和'列數：10'正常工作。我仍然需要找出爲什麼'column-count：5'不起作用。 – davecave 2012-02-15 22:57:42

確定我有一個答案，儘管這是一種解決方法，而不是解決方法。我改變了圖像，使一些高度爲300px，而另一些則爲370px。基本上，我改變了圖像的高度，並保持所有圖像的寬度相同，爲300px。因此，答案是要麼不使用方形圖像，要麼使用所有方形圖像，請使用列數：4而不是5.

如果任何人都可以提供進一步的洞察，爲什麼發生這種情況會很好。

來源

2012-03-06 05:44:09 davecave

當我的瀏覽器擊中1219像素寬（至少Firesize告訴我），我得到5周的cols。在下面，我也得到4。火狐10

一些東西，可能上會：

我的垂直滾動條也正是19像素寬
邊框左側和Firefox窗口的右邊是9 PX每個，使得18像素總

它幾乎看起來像其中一個被包含在媒體查詢中。

編輯：有點奇怪，但因爲乍一看W3 media queries site似乎表明：

的「寬度」媒體特徵描述輸出設備目標顯示區域的寬度。對於連續的媒體，這是視口的寬度（如由CSS2所描述的，第9.1.1節[CSS21]）包括呈現滾動條的尺寸（如果有的話）

來源

2012-02-15 23:04:11 Jeroen

我認爲滾動條可能是問題，但爲什麼Chris的例子能夠完美地工作？唯一的區別是他使用PHP來填充圖像。我將使用PHP吐出的圖像並將其直接放入HTML中。現在測試...確定它出於某種原因。我會看看是不是因爲我的圖像是方形的，而且高度沒有變化。 – davecave 2012-02-15 23:17:04

好的我有一個答案，但它是一種解決方法，而不是一個修復。我改變了圖像，使一些高度爲300px，而另一些則爲370px。基本上，我改變了圖像的高度，並保持所有圖像的寬度相同，爲300px。所以答案是要麼不使用方形的圖像，或使用'列數：4'，而不是5 如果有人能提供進一步的深入瞭解，爲什麼出現這種情況那將是巨大的。 – davecave 2012-02-15 23:25:30

我得到克里斯的例子同樣的效果：只有當Firesize告訴我，我1219像素請問第5列消失。不過，我注意到邊界左，我的Firefox窗口的右邊是9像素寬，並且考慮到兩次8等於18 ....時間來更新我的答案：d – Jeroen 2012-02-15 23:35:12

萬一任何其他人認爲這在其搜索結果是一個事實的圖片內聯，使他們有他們之間的一些空間，請參閱：

How can I eliminate spacing between inline elements in CSS?

我使用的字體大小：0在部分解決這一問題:)

來源

2014-09-30 07:29:29 user3468034

CSS列錯誤 - 5列數只顯示4（與圖像）

回答

相關問題