Wrap stoły długo HTML do następnej linii

Question

(znalazłem this i this ale są one o zawijania długich słów)

Mam tabeli jak poniżej:

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

muszę zawinąć kolumny jeśli ekranie użytkownika szerokość jest mała. muszę zawinąć kolumny i uzyskania efektu stołowego takiego:

dodałem style = "table-layout: fixed" ale to sprawiło, szerokość stołu dokładnie 100%, ale zdjęcia zostały automatycznie rozciągnięte na połowę dopasuj je do szerokości ekranu.

Jak wysłać kolumny do następnej linii?

Answer 1

To, co musisz zdecydować, to zachowanie zachodzące w następnym wierszu, gdy przechodzi ono do następnego. Czy dodanie nowego osieroconego wiersza, a mianowicie:

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

zobaczysz przelewowy staje się nowy wiersz z resztek i puste miejsce po prawej stronie.

Jeśli chcesz po prostu „rolling” blok można:

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

Gdzie wiersze po prostu zablokować w dół strumienia. Możesz umieścić tam tagi <br/>, aby w razie potrzeby utworzyć twarde podziały wierszy. Nie jestem pewien, czy to pomogło i nie przetestowałem w różnych przeglądarkach, ale to jest to, co myślę, że masz na myśli.