Элементы по горизонтали без js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 700px;
height: 100px;
margin: 30px auto;
border: 1px solid #ccc;
overflow-x: scroll;
}
#ruler {
border: 1px solid #FF0000;
display: inline-block;
width: 1000px;
height: 20px;
}
#ruler div {
border-right: 1px solid #999966;
float: left;
height: 20px;
width: 99px;
}
</style>
</head>
<body>
<div id="container">
<div id="ruler">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
Вот пример. Элементы расположены по горизонтали благодаря фиксированной ширине контейнера (#ruler) Вопрос: возможно ли сделать тот же результат не указывая ширину контейнеру? |
white-space: nowrap ? В хроме это срабатывает. Отпишись что в IE, опере и файрфоксе.
|
Цитата:
Не знаю как в ie, но в firefox и opera работает только когда у детей display inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 700px;
height: 100px;
margin: 30px auto;
border: 1px solid #ccc;
overflow-x: scroll;
}
#ruler {
border: 1px solid #FF0000;
display: inline-block;
white-space: nowrap;
height: 20px;
}
#ruler div {
border-right: 1px solid #999966;
display: inline-block;
height: 20px;
width: 99px;
}
</style>
</head>
<body>
<div id="container">
<div id="ruler">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
|
Цитата:
или все дети идентичной высоты и их воткнуть в элемент с высотой, меньшей двух высот их самиx |
Цитата:
Цитата:
Цитата:
Цитата:
|
danik.js,
Как умею так и несу - нех тут командовать - блин "просветлеённый" еще один, я с dmitry111, год с лишним общаюсь, проблем не возникало или решался без посредников - тут свалился оценщик сообщений, с говнокомментами |
Deff, да пофиг сколько ты там и с кем общаешься. Мне это не интересно. Ты похож на тролля. Прибежал, даже вопроса не прочитал, что-то там ответил, даже не включив мозг, убежал. Еще и обижаешься.
|
а в чём вообще проблема?
1)
#ruler{
//display: inline-block; /* ??? */
font-size:0; /* вот с какой-то из новых версий Оперы у меня это не срабатывало, даже с техподдержкой ихней пришлось общаться */
display:table; /* а это костыль для Сафари */
}
#ruler div{
display: inline-block;
}
2)
#ruler{
overflow:hidden; /* популярный костыль, но использовать осторожно! */
}
#ruler div{
float:left;
}
И вообще не понял, что тут за разборки? Свойство float (кроме значения none), делает элемент блочным. |
Цитата:
Цитата:
|
а что использование свойств display: table, table-row, table-cell и тд. не катит?
|
| Часовой пояс GMT +3, время: 02:17. |