Как создать большое количество сложенных div на одной строке со строкой прокрутки

У меня есть 3 набора вложенных div. Верхний контейнер div серый. Он содержит div, который является желтым, а последний содержит 5 цветных белых div.Как создать большое количество сложенных div на одной строке со строкой прокрутки

У меня возникла проблема с поведением переполнения CSS и непрерывностью виртуальных строк последовательных div (display: inline).

Я не могу понять, что я делаю неправильно. Я хочу, чтобы вложенные белые div сохранялись в одной строке (для любого количества белых div) и полосой прокрутки только для горизонтальной навигации при достижении максимальной ширины точки зрения желтого окна (или любой точки обзора). Вместо этого я заканчиваю тем, что мои белые блоки меняют линию при достижении предела ширины желтого прямоугольника. Есть ли способ сделать это простым способом, без помощи javascript?

Пожалуйста, любая помощь будет оценена по достоинству?

Заранее спасибо.

код выглядит следующим образом:

<html> 
<head> 
<title>Playground</title> 
<script src="scripts/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
    div#mysupracontainer { 
    position: absolute; 
border:3px solid #000; 
    background-color: gray; 
left:250px; 
    width: 700px; 
height: 500px; 
    overflow-x: auto; 
    } 
    div#panels { 
    position: absolute; 
border:3px solid #000; 
    background-color: yellow; 
left:10px; 
width: auto; 
height: 350px; 
    border-style:dotted; 
overflow-x: hidden; 
    } 
    .panelslide { 
    display:inline; 
float: left; 
border:3px solid #000; 
position: relative; 
    background-color: white; 
width: 150px; 
height: 280px; 
    } 
    </style> 
</head> 
<body> 
    <div id="mysupracontainer" ><p>container</p> 
    <div id="panels" ><p>panels</p> 
     <div class="panelslide">panelslide-1</div> 
     <div class="panelslide">panelslide-2</div> 
     <div class="panelslide">panelslide-3</div> 
     <div class="panelslide">panelslide-4</div> 
     <div class="panelslide">panelslide-5</div> 
    </div> 
    </div> 
</body> 
</html>

источник

2012-06-14 Alain

добавить:

div#panels { 
    white-space: nowrap; 
)

и удалить float: left; из .panelslide - то изменить display: inline; к display: inline-block;, он должен выглядеть следующим образом:

.panelslide { 
    display:inline-block; 
    border:3px solid #000; 
    position: relative; 
    background-color: white; 
    width: 150px; 
    height: 280px; 
}

http://jsfiddle.net/aMPxc/

источник

2012-06-14 21:07:40 Luca

Это прекрасно работает. Отличный и быстрый ответ, теперь я буду анализировать, почему это работает. С уважением. – Alain

рад, что это помогло! – Luca

Он отлично работает на Firefox-12, Chrome-19, ... но не очень хорошо работает в IE v8. Есть ли способ исправить поведение IE? – Alain

Я не уверен, если я правильно понимаю, но если вы пытаетесь получить внутренний (белый) DIV, чтобы прийти в одну строку, и добавить горизонтальную прокрутку, вместо них идет вниз, это является решением:

Я добавил следующий CSS:

div#panels { 
     overflow-y: hidden; 
     height:286px; 
     white-space:nowrap; 
    } 
    .panelslide { 
     display:inline-block; 
     height: 280px; 
    }

Here представляет собой образец.

источник

2012-06-14 21:07:51

Я думаю, что элемент ключей здесь был «white-space: nowrap» и настройками отображения. о. – Alain

Как создать большое количество сложенных div на одной строке со строкой прокрутки

ответ

Смежные вопросы