Горизонтальная прокрутка
Есть див с заданной высотой и шириной. Нужно, чтобы всё содержимое распологалось вдоль оси "х", при этом, если оно вылазило за пределы дива, то должна была появляться прокрутка без полоски.
Ничего, кроме overflow: hidden, не знаю подходящего, но там нету прокрутки. А если поставить значение scroll, то появится ужасная на вид полоска, которая, кстати, занимает часть дива. |
daMage,
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.over {
height: 40px;
width: 200px;
visibility: hidden;
overflow: auto;
}
.over div{
visibility: visible;
}
</style>
</head>
<body>
<div class="over">
<div>
<p>asdas as asd sad asd sadasda sdasd</p>
<p>asdas as asd sad ass asd sad asd sadasda d sadasda sdasd</p>
<p>asdas as asd sads asd sad asd sadasda asd sadasda sdasd</p>
<p>asdas as ass asd sad asd sadasda d sads asd sad asd sadasda asd sadasda sdasd</p>
<p>asdas as asd sas asd sad asd sadasda d asd sadasda sdasd</p>
<p>asdas as asd sas asd sad asd sadasda d asd sadasda sdasd</p>
</div>
</div>
</body>
</html>
|
Seva1986, спасибо, а можно сделать так, чтобы прокрутка была вдоль оси "х"? То есть по горизонтали. Даже не знаю, что нужно прописать, чтобы все элементы шли только по горизонтали. При заданной ширине, элементы доходят до края и спускаются вниз, а нужно, чтобы они продолжали идти дальше по горизонтали. Вот то, что мне нужно
http://s005.radikal.ru/i212/1202/ef/ebe9c3e495be.jpg только чтобы полосы не было видно. |
Всё, уже не нужно. Спасибо за помощь.
|
daMage,
можно, например флоат им посатвить, можно иначе в зависимости от задачи.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.over {
height: 70px;
width: 160px;
visibility: hidden;
overflow: auto;
}
.over>div {
visibility: visible;
overflow: hidden;
background: #000;
width:450px;
}
.over>div>div {
visibility: visible;
float: left;
width: 40px;
height: 40px;
margin: 5px;
background: #f00;
}
</style>
</head>
<body>
<div class="over">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
|
или так
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.over {
height: 80px;
width: 160px;
visibility: hidden;
overflow: auto;
white-space: nowrap;
}
.over>* {
display: inline-block;
visibility: visible;
margin: 5px;
background: #f00;
width:40px;
height:40px;
}
</style>
</head>
<body>
<div class="over">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
|
Ок, спс)
|
| Часовой пояс GMT +3, время: 13:08. |