div выходящий за пределы экрана по ширине
Как сделать див настолько широкий, насколько по ширине в него вмещаются элементы, то есть чтобы элементы не переносились на другую строку (inline-block) чтобы они просто уходили вправо за экран , при этом чтобы не было горизонтальной полосы прокрутки?
|
Цитата:
|
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> |
Цитата:
<!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>
|
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> А вообще, я не до конца прочитал задание, такая фигня) |
Skipp, ёпрст, ты сам-то смотри свои примеры... :D
Прочти еще раз, что нужно автору... Потесть свой пример... Ну что же такое...:cray: |
Ну так написал, просто не сразу.
<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>
|
Уже лучше! :yes:
|
| Часовой пояс GMT +3, время: 10:48. |