Форум

imediasun1 · #1 (**permalink**) 14.11.2013, 01:44

Как сделать див настолько широкий, насколько по ширине в него вмещаются элементы, то есть чтобы элементы не переносились на другую строку (inline-block) чтобы они просто уходили вправо за экран , при этом чтобы не было горизонтальной полосы прокрутки?

ksa · #2 (**permalink**) 14.11.2013, 09:02

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

чтобы они просто уходили вправо за экран

Только скриптом проверять ширину всех дочерних элементов, после этого увеличивать ширину родительского.

Skipp · #3 (**permalink**) 14.11.2013, 09:29

display: inline
white-space: nowrap
Не пробовали?

<div style="white-space: nowrap;">
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
</div>

ksa · #4 (**permalink**) 14.11.2013, 09:34

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

Не пробовали?

Ты сам-то пробовал?

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container {
	display: inline;
	white-space: nowrap;
}
#container > div {
	width: 400px;
	heigth: 30px;
	border: 1px solid;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
</body>
</html>

Skipp · #5 (**permalink**) 14.11.2013, 09:52

ksa,
Так зачем же делать контейнер делать inline? Логично, что white-space работает с inline элементами, вот блоки внутри и должны быть inline или inline-block;

<div style="white-space: nowrap; width: 100px; border: 1px solid #555; padding: 3px; height: 100px;">
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: #000; margin-right: 3px;"></div>
</div>

А вообще, я не до конца прочитал задание, такая фигня)

ksa · #6 (**permalink**) 14.11.2013, 09:56

Skipp, ёпрст, ты сам-то смотри свои примеры...

Прочти еще раз, что нужно автору... Потесть свой пример... Ну что же такое...

Skipp · #7 (**permalink**) 14.11.2013, 10:00

Ну так написал, просто не сразу.

<html>
	<head>
		<style type="text/css">
			#wrap {
				white-space: nowrap;
				height: 100px;
				border: 1px solid #AAA;
				overflow: hidden;
			}
			#wrap > div {
				width: 70px;
				height: 70px;
				margin: 2px;
				background-color: #333;
				display: inline-block;
				color: #FFF;
				text-align: center;
				line-height: 70px;
			}
		</style>
	</head>
	<body>
		<div id='wrap'>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
		</div>
	</body>
</html>

ksa · #8 (**permalink**) 14.11.2013, 10:04

Уже лучше!

Форум

Справочник

Discord чат

Курсы javascript