Отключить автоматический перенос блока на новую строку. CSS

#div #css

Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние
не переносились на новую строку, а скрывались за правым краем и можно было их скроллить

Подскажите каким образом можно это сделать.

http://jsfiddle.net/M8een/



#container {
  border: 2px solid red;
  width: 350px;
  height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
}
.image {
  float: left;
  margin: 2px;
}

  
  
  
  




    

Ответы

Ответ 1

Для текста есть такая штука white-space: nowrap;
Она делает именно то, что вам надо - текст в одну строку!
А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline),
или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.
inline-block - еще и гораздо более лучший способ выстроить элементы друг за другом
Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/
У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст)
влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру
или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали
по верху и надо дополнительно указывать vertical-align: top;
Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы
строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам
между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение:
http://jsfiddle.net/M8een/2/