Несколько встроенных divs, которые превышают ширину контейнера

Question

Я не могу понять, как сохранить несколько divs inline, если их ширина превышает ширину контейнера. Если ширина всех divs составляет около 1000 px, а ширина контейнера - 500, я хочу, чтобы divs для перекрытия контейнера и горизонтальной полосы прокрутки для отображения.

#container { 
 
    overflow: hidden; 
 
    background: red; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#container>div { 
 
    border: 1px solid #000; 
 
    width: 30%; 
 
    height: 100px; 
 
    margin: 10px; 
 
    float: left; 
 
}

<div id="container"> 
 
    <div class="first"></div> 
 
    <div class="second"></div> 
 
    <div class="third"></div> 
 
    <div class="fourth"></div> 
 
    <br style="clear: both;"> 
 
</div>

Fiddle: Click

Answer 1

Не используйте поплавок, использовать встроенный блок с контейнером, установленным в Nowrap для пустого пространства, а затем добавить overflow: auto; в контейнер, чтобы вызвать скроллбар как необходимо.

jsFiddle

#container{ 
    white-space: nowrap; 
    overflow: auto; 
} 
#container>div{ 
    display: inline-block; 
} 

Answer 2

добавить некоторые CSS

#container { 
    background: red none repeat scroll 0 0; 
    height: 200px; 
    overflow: auto; 
    white-space: nowrap; 
    width: 500px; 
} 

#container > div { 
    border: 1px solid #000; 
    display: inline-block; 
    height: 100px; 
    margin: 10px; 
    width: 30%; 
} 

http://jsfiddle.net/WGCyu/1325/

Answer 3

Как говорит Pangloss, не используйте поплавок, но показывать их рядный. И использовать переполнение-х: прокрутка

#container { 
 
    overflow: hidden; 
 
    background: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    white-space: nowrap; 
 
    overflow-x:scroll 
 
} 
 
#container>div { 
 
    border: 1px solid #000; 
 
    width: 30%; 
 
    height: 100px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div class="first"></div> 
 
    <div class="second"></div> 
 
    <div class="third"></div> 
 
    <div class="fourth"></div> 
 
    <br style="clear: both;"> 
 
</div>