1

Есть задача: надо сделать div (блок), в который вложены другие блоки (div). Контейнер имеет фиксированную высоту и ширину, заданную в пикселях; вложенные блоки также имеют фиксированную высоту и ширину. Если блоки не помещаются в контейнер по горизонтали, то должна появится горизонтальная полоса прокрутки. Проблема в том, что если блоки не помещаются, они переносятся на новую строку, а скролл не появляется.

Вот пример http://jsfiddle.net/sj296/27/

<div id = "ct">
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
    <div class = "gt">
    </div>
</div>​

-

ct {
    height: 100px;
    overflow: scroll;
    width: 100px;
}
.gt {
    background: red;
    color: white;
    display: inline-block;
    float: left;
    height: 20px;
    margin-bottom: 1px;
    margin-left: 1px;
    width: 15px;
}

2 ответа 2

1

Можно сделать так - http://jsfiddle.net/sj296/28/

1
  • Это, как я понял, немного не то, что хотелось вопрошающему. Если сделать <pre><code> .gt{ width:20px; </code></pre> то видно, что блоки все же переносятся на след. строку
    – Ekkertan
    29 авг 2012 в 13:20
1

нужно поместить все внутренние блоки в один общий и обязательно указать ему ширину

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.