Bọc bảng HTML dài để dòng tiếp theo

Question

(tôi thấy this và this nhưng họ là về gói từ lâu)

Tôi có một bảng như thế này:

<table id="myTable" width="100%" border="5" style="table-layout:fixed"> 
<tr> 
<td><img src="photo1"></td> 
<td><img src="photo2"></td> 
<td><img src="photo3"></td> 
<td><img src="photo4"></td> 
<td><img src="photo5"></td> 
<td><img src="photo6"></td> 
</tr> 
</table> 

tôi cần phải quấn cột nếu màn hình của người dùng chiều rộng nhỏ. tôi cần phải quấn cột và có được một kết quả bảng như thế này:

tôi thêm style = "table-layout: fixed" nhưng chiều rộng bảng làm này chính xác 100%, nhưng hình ảnh được tự động kéo dài đến nửa để phù hợp với chúng để chiều rộng màn hình.

Tôi làm cách nào để gửi các cột tới dòng tiếp theo?

Answer 1

Điều bạn cần quyết định là hành vi nào sẽ xảy ra với hàng tiếp theo khi nó chảy xuống tiếp theo. Có thêm một hàng mồ côi mới, ví dụ:

#container { 
    width: 95%; 
    max-width: 646px; 
    margin: 10px auto; 
    border: 5px solid black; 
    padding: 5px; 
} 
#container .row { 
    border: 1px solid green; 
    border-left: 0; 
    border-top: none; 
    margin: 0; 
    padding: 0; 
} 
#container br { 
    clear: both; 
} 
#container .block { 
    border: 1px solid blue; 
    border-bottom: 0; 
    border-right: 0; 
    float: left; 
    width: 128px; 
} 

<div class="row"> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <br/> 
</div> 

http://jsfiddle.net/userdude/KFFgf/

Bạn sẽ thấy tràn trở thành một hàng mới với còn sót lại và không gian trống bên phải.

Nếu bạn chỉ muốn một "cán" block, bạn có thể:

http://jsfiddle.net/userdude/KFFgf/1/

Trường hợp hàng chỉ chặn xuống trong dòng chảy. Bạn có thể đặt các thẻ <br/> vào đó để tạo các ngắt hàng cứng nếu cần. Bạn không chắc chắn liệu điều đó có hữu ích và chưa thử nghiệm trên các trình duyệt hay không, nhưng đó là những gì tôi nghĩ bạn có trong đầu.