Форум

dmitry111 · #1 (**permalink**) 11.03.2013, 05:47

<!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)

Вопрос: возможно ли сделать тот же результат не указывая ширину контейнеру?

danik.js · #2 (**permalink**) 11.03.2013, 06:10

white-space: nowrap ? В хроме это срабатывает. Отпишись что в IE, опере и файрфоксе.

dmitry111 · #3 (**permalink**) 11.03.2013, 07:05

Сообщение от danik.js

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>

Deff · #4 (**permalink**) 11.03.2013, 17:01

Сообщение от dmitry111

у детей display inline-block

Ну или float:left;
или все дети идентичной высоты и их воткнуть в элемент с высотой, меньшей двух высот их самиx

danik.js · #5 (**permalink**) 11.03.2013, 18:53

Сообщение от Deff

Ну или float:left;

Сообщение от dmitry111

#ruler div {
...
float: left;
...
}

Сообщение от dmitry111

Не знаю как в ie, но в firefox и opera работает только когда у детей display inline-block

Сообщение от Deff

или все дети идентичной высоты и их воткнуть в элемент с высотой, меньшей двух высот их самиx

Ты читать не умеешь? Или лень читать целиком вопрос? Тогда не нужно постить бред.

Deff · #6 (**permalink**) 11.03.2013, 19:09

danik.js,
Как умею так и несу - нех тут командовать - блин "просветлеённый" еще один, я с dmitry111, год с лишним общаюсь, проблем не возникало или решался без посредников - тут свалился оценщик сообщений, с говнокомментами

danik.js · #7 (**permalink**) 12.03.2013, 05:53

Deff, да пофиг сколько ты там и с кем общаешься. Мне это не интересно. Ты похож на тролля. Прибежал, даже вопроса не прочитал, что-то там ответил, даже не включив мозг, убежал. Еще и обижаешься.

Nanto · #8 (**permalink**) 15.03.2013, 00:02

а в чём вообще проблема?
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), делает элемент блочным.

dmitry111 · #9 (**permalink**) 15.03.2013, 00:41

Сообщение от Nanto

а в чём вообще проблема?

у меня твои примеры не сработали (может я их не правильно написал).. Выложи готовый рабочий код на основе моего примера

Сообщение от Nanto

И вообще не понял, что тут за разборки? Свойство float (кроме значения none), делает элемент блочным.

блочным?

devote · #10 (**permalink**) 15.03.2013, 00:44

а что использование свойств display: table, table-row, table-cell и тд. не катит?

Форум

Справочник

Discord чат

Курсы javascript