overflow-x stacks divs on window resize

Question

Я хотел бы настроить горизонтальный контейнер, содержащий внутри него несколько (меньших) столбцов. У меня есть следующие настройки:

http://jsfiddle.net/f464W/1/

Как вы можете видеть, при изменении размеров окна, то .column контейнеры только стек вертикально, когда ширина окна слишком мал, чтобы вместить их всех.

не должны

overflow-x: hidden 

Остановите класс .column не отображался, когда они убегают в сторону .container?

Answer 1

Добавить white-space: no-wrap.container

http://jsfiddle.net/feitla/f464W/17/

.container { 
    max-height: 600px; 
    width: 100%; 
    margin-top: 100px; 
    background: red; 
    padding: 0; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    white-space: nowrap; 
} 

Answer 2

Вы можете добавить float: left; в .column, и это должно дать вам желаемый эффект. Затем вам нужно будет сыграть с margin, если вы хотите сохранить расстояние между столбцами.

Answer 3

С overflow-x: hidden скроет, что находится справа от вашего div. Но естественное поведение div s заключается в том, чтобы обернуть линию ниже, когда они находятся вне пространства, поэтому ничего не происходит. Вам не нужно обматывать div. если вы добавите white-space: nowrap в свой контейнер CSS, они будут стекать только по горизонтали.