Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние не переносились на новую строку, а скрывались за правым краем и можно было их скроллить
Подскажите каким образом можно это сделать.
http://jsfiddle.net/M8een/
#container {
border: 2px solid red;
width: 350px;
height: 120px;
overflow-x: auto;
overflow-y: hidden;
}
.image {
float: left;
margin: 2px;
}
Ответ
Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо - текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово. inline-block - еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/ У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top; Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение: http://jsfiddle.net/M8een/2/
Комментариев нет:
Отправить комментарий