Javascript-форум - Элементы по горизонтали без js

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Элементы по горизонтали без js (https://javascript.ru/forum/xhtml-html-css/36299-ehlementy-po-gorizontali-bez-js.html)

dmitry111

11.03.2013 05:47

Элементы по горизонтали без 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)

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

danik.js

11.03.2013 06:10

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

dmitry111

11.03.2013 07:05

Цитата:

Сообщение от danik.js (Сообщение 239940)

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	11.03.2013 17:01

Цитата:

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

у детей display inline-block

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

danik.js

11.03.2013 18:53

Цитата:

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

Ну или float:left;

Цитата:

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

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

Цитата:

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

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

Цитата:

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

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

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

Deff	11.03.2013 19:09

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

danik.js

12.03.2013 05:53

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

Nanto

15.03.2013 00:02

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

#ruler{
   //display: inline-block; /* ??? */
   font-size:0; /* вот с какой-то из новых версий Оперы у меня это не срабатывало, даже с техподдержкой ихней пришлось общаться */
   display:table; /* а это костыль для Сафари */
}
#ruler div{
   display: inline-block;
}

#ruler{
   overflow:hidden; /* популярный костыль, но использовать осторожно! */
}
#ruler div{
   float:left;
}

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

dmitry111

15.03.2013 00:41

Цитата:

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

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

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

Цитата:

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

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

блочным? :blink:

devote

15.03.2013 00:44

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

dmitry111

15.03.2013 00:47

Цитата:

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

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

у таблицы есть один серьезный недостаток - она не может иметь динамическую ширину выходящую за пределы элемента контейнера

Nanto

15.03.2013 01:01

у таблиц есть дофига недостатков и в каждом конкретном случае они разные.
но в целом по 2 причинам:
1) <!--[if lte IE 7]>
2) несколько бредовая затея по смыслу - эмулировать таблицу через стили. проще уж тогда в HTML её и забабахать, хотя бы ослы станут поддерживать.

Nanto

15.03.2013 01:10

Цитата:

Сообщение от dmitry111 (Сообщение 240823)

блочным? :blink:

http://www.codenet.ru/webmast/css2/visuren.php#q24
пункт 3.

Nanto

15.03.2013 01:14

Цитата:

Сообщение от dmitry111 (Сообщение 240823)

Конечно не сработали, я же только указал свойства КОНКРЕТНО для выстраивания по горизонтали.

dmitry111

15.03.2013 02:01

Цитата:

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

http://www.codenet.ru/webmast/css2/visuren.php#q24
пункт 3.

странно у меня не делает:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   #layer {
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    
   }
  </style>
 </head> 
 <body> 
   <div id="layer" style="display: inline; float: left; width: 100px;">
   Кликни на меня, чтобы узнать мой display и float!
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
   <script>
     document.getElementById("layer").onclick = function () {
       alert("display: " + this.style.display + ", float:" + this.style.float);
     };
   </script>
 </body>
</html>

float это float, а display это display

Deff	15.03.2013 02:35

Цитата:

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

пост 13
http://javascript.ru/forum/misc/3583...tml#post236904 не подходит ?

dmitry111

15.03.2013 04:10

Цитата:

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

Вопрос с выводом данных в горизонтальной верстке не подходит ?

нет. Таблица она же вычисляет вложенные элементы относительно своей ширины, а мне нужно, наоборот, чтоб вложенные элементы производили вычисления своего контейнера и делали его во всю длину

Deff	15.03.2013 05:50

dmitry111,
в посте 13 - нету таблицы, другое дело, что контейнер авторасширяется только до края окна, далее просто элементы стоят из-за float в единой строке,

danik.js

15.03.2013 08:19

Цитата:

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

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

У ячеек таблиц можно выставить только желаемую ширину, и она не гарантируется. Если ячейку есть куда ужать, чтобы таблица в лезла в контейнер - ячейка будет ужата. То есть потребуются дивы-распорки. В итоге слишком костыльно и некроссбраузерно получится.

devote

15.03.2013 10:11

Цитата:

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

float:" + this.style.float);

this.style.cssFloat

Цитата:

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

В итоге слишком костыльно и некроссбраузерно получится.

не кроссбраузерно где? IE7 - only? пора уже забыть этот браузер

danik.js

15.03.2013 10:22

Цитата:

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

не кроссбраузерно где? IE7 - only? пора уже забыть этот браузер

Ну да, не спорю. На IE7 сам постоянно забиваю. Это ошибка ~~природы~~ мелкософта, а не браузер. Я имел ввиду "костыльно, да еще при этом не будет работать в старых ослах"

devote

15.03.2013 10:25

Цитата:

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

про таблицы не спорю, а сделанная таблица на CSS ведет себя не так как обычные таблицы:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

Вариант 2, насильно пытаемся растянуть блок, никаких распорок не нужно:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>рррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррр</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

Вариант 3, не даем растягиваться:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>рррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррр</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

danik.js

15.03.2013 10:51

Вот про min-width я не подумал. Круто)

<!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: table;
            height: 20px;
        }
 
        #ruler div {
            border-right: 1px solid #999966;
            display: table-cell;
            height: 20px;
            min-width: 99px;
            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>

devote, разницы в поведении нет. Просто возможны расхождения из-за отсутствия display:table-row элемента.
Убери в коде выше min-width и ты поймешь о чем я говорил.

devote

15.03.2013 11:03

Цитата:

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

devote, разницы в поведении нет. Просто возможны расхождения из-за отсутствия display:table-row элемента.
Убери в коде выше min-width и ты поймешь о чем я говорил.

В любом случае все зависит от конкретно поставленной задачи. А переживать из-за ИЕ7 нет смысла. Я давно использую такой подход и меня он вполне устраивает. А на ИЕ7 мне срать. (Хотя честно скажу для ИЕ7 есть костыли в CSS написанные на expression, это если уж очень приспичит)

Часовой пояс GMT +3, время: 00:03.