Wymusza div rosnąć szersza niż okno przeglądarki

Question

Jak mogę zmusić DIV rosnąć szersza niż okno przeglądarki, aby pomieścić to dzieci poziomo, zamiast zmuszać ich na nowych wierszy

tj rozważyć następujący kod z skrzypce . Wewnątrz elementu kontenera znajduje się 6 elementów podrzędnych, wszystkie o minimalnej szerokości 200 pikseli i wszystkie ustawione jako pływające: w lewo. Gdy rozmiar okna jest odpowiednio duży, wszystkie są w jednym rzędzie. Kiedy jest zwężony, zaczynają naciskać na nowe wiersze. Najlepiej byłoby, gdyby pozostały w jednym wierszu, a przeglądarka wyświetla pasek przewijania.

http://jsfiddle.net/krippy2k/x8sDp/20/

.container { 
} 

.child-element { 
    min-width: 200px; 
    float: left; 
    height: 100px; 
} 

.child1 { 
    background-color: purple; 
} 
.child2 { 
    background-color: orange; 
} 
.child3 { 
    background-color: black; 
} 
.child4 { 
    background-color: green; 
} 
.child5 { 
    background-color: blue; 
} 
.child6 { 
    background-color: red; 
} 

<div class="container"> 
    <div class="child-element child1"></div> 
    <div class="child-element child2"></div> 
    <div class="child-element child3"></div> 
    <div class="child-element child4"></div> 
    <div class="child-element child5"></div> 
    <div class="child-element child6"></div> 
</div> 

Answer 1

Albo można zapewnić width do elementu nadrzędnego, w przeciwnym wypadku można użyć float: left; z display: inline-block; i white-space: nowrap;

.container { 
    white-space: nowrap; 
} 

.child-element { 
    min-width: 200px; 
    display: inline-block; 
    height: 100px; 
} 

Demo

Dla white-space z 4px między każdy el ement, można użyć margin-left: -4px;

Demo 2

Answer 2

Dodawanie ogromny szerokości do pojemnika działa

.container { 
    width: 999999px; 
} 

Chociaż nie jestem pewien, dlaczego chcesz zrobić coś takiego, z usability/punktu interfejsu widzenia.

Answer 3

Zamiast unoszenia dzieci, ustaw je w bloku inline i ustaw white-space:nowrap na kontenerze.

.container { 
    white-space:nowrap; 
} 

.child-element { 
    display:inline-block; 
    min-width: 200px; 
    height: 100px; 
} 

http://jsfiddle.net/x8sDp/24/

Answer 4

Wystarczy ustawić .container do display:table i .child-elements być display:table-cell i usunąć float:left z .child-element:

.container { 
    display: table; 
} 

.child-element { 
    min-width: 200px; 
    display: table-cell; 
    height: 100px; 
} 

DEMO