Chiều rộng của phao không còn co lại để vừa khi nội dung được quấn vào nhiều dòng

Question

Đây là test file.

Thay đổi kích thước cửa sổ đủ rộng để chứa tất cả bốn hộp. Lưu ý rằng vùng chứa không rộng hơn các hộp, như dự định.

Thay đổi kích thước cửa sổ đủ nhỏ để các hộp nằm trên nhiều dòng. Lưu ý rằng vùng chứa có chiều rộng đầy đủ của trang (điều này là không mong muốn).

Tại sao? Có thể ngăn chặn điều này theo cách không phụ thuộc vào kích thước của các hộp không?

(Nhìn trên Firefox 3.5 và 4.0.221.8 Chrome. Nếu một giải pháp không làm việc trong IE6, đó là tốt.)

Answer 1

CSS 2.1 phần 10.3.5 nổi, yếu tố phi thay thế (http://www.w3.org/TR/CSS21/visudet.html#float-width) nói rằng :

width = min (max (ưu tiên chiều rộng tối thiểu, chiều rộng có sẵn), chiều rộng ưa thích)

• chiều rộng tối thiểu ưa thích = chiều rộng của một trong các hộp bên trong, vì chúng ta đều cùng kích thước.
• chiều rộng có sẵn = chiều rộng của trang trừ lề/đường viền.
• chiều rộng ưa thích = chiều rộng của tất cả các hộp bên cạnh nhau.

Điều này hoàn toàn lành mạnh đối với trường hợp gói văn bản (hãy tưởng tượng nếu chiều rộng thay đổi tùy thuộc vào cách đóng đường đến cạnh của không gian có sẵn) nhưng không phải thứ bạn muốn ở đây. Tôi không thể nhìn thấy một cách để tránh điều này, mặc dù.

Answer 2

Tôi đã gặp phải sự cố này với một khoảng văn bản được gói bởi vì giá trị tối đa của một div cha mẹ. Đường biên không co lại ở bên phải.

Dưới đây là một giải pháp JS:

Tháo phao trên tất cả mọi thứ và làm cho các bức ảnh nội tuyến, sau đó di chuyển phía sau để một div wrapper và thêm một jquery one-liner để sửa chữa:

<script>$('#galleryWrapper').width($('.gallery').width());</script>

Dưới đây là các mã:

http://jsbin.com/odeya3

Answer 3

Bạn có thể sử dụng các truy vấn phương tiện truyền thông cho việc này. Xem http://css-tricks.com/css-media-queries/