Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2012, 21:08
Аспирант
Отправить личное сообщение для daMage Посмотреть профиль Найти все сообщения от daMage
 
Регистрация: 31.07.2010
Сообщений: 35

Горизонтальная прокрутка
Есть див с заданной высотой и шириной. Нужно, чтобы всё содержимое распологалось вдоль оси "х", при этом, если оно вылазило за пределы дива, то должна была появляться прокрутка без полоски.
Ничего, кроме overflow: hidden, не знаю подходящего, но там нету прокрутки. А если поставить значение scroll, то появится ужасная на вид полоска, которая, кстати, занимает часть дива.
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2012, 12:18
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2012, 13:30
Аспирант
Отправить личное сообщение для daMage Посмотреть профиль Найти все сообщения от daMage
 
Регистрация: 31.07.2010
Сообщений: 35

Seva1986, спасибо, а можно сделать так, чтобы прокрутка была вдоль оси "х"? То есть по горизонтали. Даже не знаю, что нужно прописать, чтобы все элементы шли только по горизонтали. При заданной ширине, элементы доходят до края и спускаются вниз, а нужно, чтобы они продолжали идти дальше по горизонтали. Вот то, что мне нужно
http://s005.radikal.ru/i212/1202/ef/ebe9c3e495be.jpg
только чтобы полосы не было видно.
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2012, 15:00
Аспирант
Отправить личное сообщение для daMage Посмотреть профиль Найти все сообщения от daMage
 
Регистрация: 31.07.2010
Сообщений: 35

Всё, уже не нужно. Спасибо за помощь.
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2012, 15:02
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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>
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2012, 15:06
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

или так
<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 12.02.2012, 15:28
Аспирант
Отправить личное сообщение для daMage Посмотреть профиль Найти все сообщения от daMage
 
Регистрация: 31.07.2010
Сообщений: 35

Ок, спс)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка баннеров по времени TTongorovortoto Работа 3 22.04.2011 13:35
горизонтальная прокрутка блока dmitrio Элементы интерфейса 5 15.10.2010 23:41
прокрутка изображений RGun jQuery 3 08.03.2010 10:03
Горизонтальная прокрутка в gridPanel mwnuke ExtJS 2 09.11.2009 19:25
Горизонтальная прокрутка окна по событию Nubi jQuery 2 29.11.2008 19:10