Поплавки и переполнение-x: скрытые;

Question

Я пытаюсь скрыть остальную часть коробки, если она превышает ширину контейнеров (100% в фактическом коде). Элементы плавающие.

Однако он бросает их на следующую строку, вместо того чтобы скрывать оставшуюся часть.

Вот пример, который я сделал для демонстрации проблемы.

<div class="wrapper"> 
    <div class="box blue"></div> 
    <div class="box red"></div> 
    <div class="box blue"></div> 
    <div class="box red"></div> 

    <!-- Just for showing the pink box --> 
    <div style="clear: both;"></div> 
</div> 

И CSS

.wrapper { 
    width: 180px; 
    background-color: pink; 

    overflow-x: hidden; 
} 

.wrapper .box { 
    width: 50px; 
    height: 50px; 

    float: left; 
} 

.blue { 
    background-color: blue; 
} 

.red { 
    background-color: red; 
} 

Как я могу добиться этого?

Вот скрипка, демонстрирующая проблема: http://jsfiddle.net/bLaxyvwb/2/

Answer 1

Вот JSFiddle с изменениями, которые необходимо применить.

Используйте следующий CSS:

.wrapper{ 
width: 180px; 
background-color: pink; 
white-space: nowrap; 
overflow-x: hidden; 
} 

.wrapper .box { 
width: 50px; 
height: 50px; 
display: inline-block; 
} 

И HTML должен выглядеть следующим образом:

<div class="wrapper"> 
    <div class="box blue"></div> 
    <div class="box red"></div> 
    <div class="box blue"></div> 
    <div class="box red"></div> 
</div> 

я сделал следующее:

• Добавлено бело-пространстве: Nowrap к. обертка
• Удалено поплавок: слева; от .wrapper .box
• Добавлен дисплей: встроенный блок; к .wrapper .box