Jak zapobiec zawijaniu elementów div typu floated przy zmianie rozmiaru przeglądarki?

Question

W jaki sposób sprawiasz, że DIV, które są unoszone obok siebie, nie owijają się, gdy przeglądarka jest zmieniana tak, że obszar wyświetlania staje się mniejszy?

div { 
    float: left; 
} 

Na przykład, gdy przeglądarka jest całkowicie zmaksymalizowane div s linię w górę tak:

|div| |div| |div| |div| |div| |div| |div| |div| 

Ale gdy przeglądarka zmianie wielkości mniejszy to się dzieje:

|div| |div| |div| |div| |div| 
|div| |div| |div| 

jak można Sprawiasz, że div nie jest zawijany, gdy przeglądarka ma mniejszy rozmiar w przeglądarce?

Answer 1

Zawiń je w inny element div, który ma określoną szerokość (lub szerokość minimalną).

<div class="parentContainer"> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
</div> 

.parentContainer { 
    /* The width of the parent needs to be equal to the total width of the children. 
    Be sure to include margins/padding/borders in the total. */ 
    width: 600px; 
    overflow: auto; 
} 

Pomaga również w przepełnieniu: automatycznie określona w polu zawierającym, aby jej wysokość pasowała do podrzędnego elementu pływającego.

Answer 2

Marka div kontenera wokół nich

.container { 
width: 500px; 
white-space: nowrap; 
overflow: visible/hidden/scroll - whichever suits you; 
} 

Answer 3

zdaję sobie sprawę, że jest to modne nienawidzić na stołach, ale mogą być przydatne.
http://jsfiddle.net/td6Uw/ Zamiast unoszenia elementów div, umieść je w tabeli i zawiń tabelę za pomocą ograniczonego rozmiaru div. TR zapobiegnie owijaniu.
Użyłem również DIV wewnątrz TD, aby ułatwić stylizację komórek. Jeśli spędzasz czas, możesz stylizować niszczycieli, ale trudno mi je zaprojektować i zwykle wyciskać i używać tylko metody DIV-in-TD używanej przez moje skrzypce.

Answer 4

jestem dość późno do gry, ale oto co znalazłem, że działa:

Powiedzmy masz nawigację strukturę:

<nav> 
    <ul> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
    </ul> 
</nav> 

Aby zmusić go do wyświetlania linków wbudowany, bez zawijania, można po prostu użyć:

nav ul { 
    white-space: nowrap; 
} 

nav ul li { 
    display: table-cell; 
} 

Brak stałych szerokości lub czegokolwiek, co jest wymagane.

Fiddle: http://jsfiddle.net/gdf3prb4/

Answer 5

Jest rzeczywiście bardzo prosty. Przykład kodu:

Element { 
white-space: nowrap; 
}