Lỗi cột CSS - 5 cột chỉ hiển thị 4 (có hình ảnh)

Question

Tôi đang cố gắng triển khai example của Chris Coyier bằng cách sử dụng cột CSS để tạo lưới hình ảnh phản hồi liền mạch.

Tôi đặt các tệp của Chris lên máy chủ của mình và mọi thứ đều ổn. Điều duy nhất tôi thay đổi là những hình ảnh thực tế.

Bây giờ, như bạn thấy trên test page của tôi, chỉ có 4 cột hình ảnh thay vì 5 cột được chỉ định, sử dụng column-count:5;. Cột thứ năm chỉ là khoảng trắng không có nội dung.

Điều này chỉ xảy ra khi cửa sổ trình duyệt lớn hơn 1200px. Khi cửa sổ trình duyệt nhỏ hơn 1200px, truy vấn phương tiện sẽ khởi động và giảm số cột 4, 3, 2 và cuối cùng 1. Nói cách khác, lỗi này chỉ xảy ra khi số column-count: là 5 và lên

Điều này xảy ra trong FF 10, Chrome 17+ và Safari 5+.

Bất kỳ trợ giúp sẽ được đánh giá cao!

Dưới đây là HTML tỉa:

<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> 

Đây là CSS hoang sơ:

* { 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; 
    } 
} 

Answer 1

Ok Tôi có một câu trả lời, mặc dù nó là một cách giải quyết, không phải là một sửa chữa. Tôi đã thay đổi hình ảnh sao cho một số có chiều cao 300px và những hình ảnh khác, 370px. Về cơ bản tôi thay đổi chiều cao của hình ảnh và giữ chiều rộng của tất cả các hình ảnh giống nhau, 300px. Vì vậy, câu trả lời là không sử dụng hình ảnh vuông hoặc nếu bạn muốn sử dụng tất cả hình ảnh vuông, hãy sử dụng số cột: 4 thay vì 5.

Nếu ai có thể hiểu rõ hơn về lý do điều này xảy ra.

Answer 2

Khi trình duyệt của tôi chạm 1219 px rộng (ít nhất là Firesize nói với tôi) tôi nhận được 5 cols. Dưới đây tôi nhận được 4 là tốt. Firefox 10

Một số điều mà có thể xảy ra:

• thanh cuộn dọc của tôi là chính xác rộng 19 px
• Biên giới trái và bên phải của cửa sổ Firefox 9 px mỗi, làm 18px tổng

Dường như dường như một trong số này đang được đưa vào truy vấn phương tiện.

---

Edit: kinda lạ tuy nhiên, vì ở cái nhìn đầu tiên W3 media queries site dường như cho thấy rằng:

Tính năng truyền thông ‘width’ mô tả chiều rộng của vùng hiển thị mục tiêu của thiết bị đầu ra. Đối với phương tiện truyền thông liên tục, đây là độ rộng của khung nhìn (như mô tả của CSS2, phần 9.1.1 [CSS21]) bao gồm kích thước của một thanh cuộn render (nếu có)

Answer 3

Chỉ trong trường hợp bất kỳ ai khác thấy này trong việc tìm kiếm kết quả đó là thực tế những hình ảnh inline để họ có một số không gian giữa chúng xem:

How can I eliminate spacing between inline elements in CSS?

tôi sử dụng font-size: 0 trên phần để sửa lỗi này :)