siła pływaka: lewe divs do dont przejdź do następnej linii

Question

pozwala powiedzieć, że mam 20 sam div z float: left property i some width. Chcę, żeby były w jednej linii i jeśli nie pasują do ekranu, aby strona przewijała się poziomo.

fiddle

Answer 1

To w zasadzie jak pływa pracy. Jeśli chcesz opisanego zachowania, możesz zamiast tego zrobić coś innego, na przykład white-space: nowrap; na kontenerze i display: inline-block; zamiast na float.

http://jsfiddle.net/NPzsV/3/

.container { 
    white-space: nowrap; 
} 
.line { 
    display: inline-block; 
    width: 200px; 
    vertical-align: top; 
    white-space: normal; 
} 

Należy pamiętać jednak: z tym podejściem, nowe linie/przestrzenie/zakładki pomiędzy div spowoduje przestrzeń między nimi w renderingu.

Answer 2

ustawić wysokość do div i dodać przepełnienie nieruchomości: przewijanie

<div class="parentDiv"> 
    <div class="line">ddd</div> 
    <div class="line">ddd</div> 
    <div class="line">ddd</div> 
    ... 
</div> 

i CSS:

.parentDiv{height:50px; overflow: scroll;} 

Answer 3

ustawić ciężko szerokość od elementu nadrzędnego:

body{ width:8000px; } 

Demo

Answer 4

Zastosowanie display: inline-block zamiast float: left na div i dodać właściwość white-space: nowrap do ich kontenera nadrzędnego.

Demo: http://jsbin.com/akiniv/1/edit

Demo z skrzypce;) http://jsfiddle.net/NPzsV/4/