Переполнение - скрытые и перемещенные элементы слева

Question

У меня есть серия div как столбцы в родительском div, которая настроена на переполнение скрытой, но столбцы обертываются, когда вы достигаете правой стороны контейнера, а не переполняете.

Это базовая версия кода.

.column{ 
width:200px; 
float:left; 
} 
<div style="overflow:hidden"> 
<div class="column"></div> 
<div class="column"></div> 
</div> 

Answer 1

Вы должны использовать inline-bock вместо float: left;

http://jsfiddle.net/RgJk9/1/

.container { width: 300px; overflow: scroll; white-space: nowrap; } 

.column{ 
    background-color: red; 
    width:200px; 
    height: 200px; 
    display: inline-block; 
}​ 

С HTML:

<div class="container"> 
    <div class="column"></div> 
    <div class="column"></div> 
</div>​ 

Answer 2

Попробуйте

div.column { 
    white-space: nowrap; 
    overflow-x: hidden; 
    width: 200px; 
} 

Это скроет любое переполнение, и заставить текст не обернуть, сохраняя все это на одной линии ,

Для новых браузеров CSS поддерживает свойство ellipsis для text-overflow, чтобы добавить приятный штрих.