Сила <div>элементов на 2 линии

Question

Прежде всего, спасибо, что нашли время прочитать это.

Я работаю с HTML / CSS столько, сколько себя помню, но сегодня я столкнулся с проблемой, которая полностью поставила меня в тупик.

У меня есть контейнер, в котором есть определенное количество (скажем, 8) динамически создаваемых дочерних элементов div. Я хочу, чтобы контейнер отображал дочерние элементы в две строки, даже если они переполняются по горизонтали.

Например,

 ____________
|            |
|[1] [3] [5] | [7]
|[2] [4] [6] | [8]
|____________|

Затем я собираюсь использовать JS для реализации хорошей функции прокрутки.

Однако в настоящее время я могу заставить их отображать только одну строку вместо двух, установив для них:

display: inline-block;

Или прокрутка по вертикали, используя довольно стандартный:

float: left;

Любой совет по этому поводу был бы очень признателен!

Chris

Answer 1

Поместите ваши дочерние элементы в ряды.

.row { height:100px; overflow hidden;} // assuiming 100px is height of a child
.row > .children { height:100px; float:left;}

Answer 2

Если вы просматриваете элементы по порядку, я думаю, что было бы проще использовать столбцы, чем строки:

http://jsfiddle.net/ePq6n/

тогда, если вы хотите, чтобы они были в контейнерекак следующее:

http://jsfiddle.net/ePq6n/1/

Answer 3

Вот что я сделал

Вы можете играть здесь (http://jsfiddle.net/LAymH/2/)

Работает как в IE, так и в FF

<div class="container">
    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>

    <div class="breaker"></div>

    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>
</div>

.row {
    float: left;
    border: 1px solid red;
}
.breaker{
    clear:both;
}
.row-container{
    width: 600px;
}
.container {
    width: 100px;
    overflow-x: scroll;
    border: 1px solid blue;    
}

Answer 4

Используя технику float, после 4-го деления поместите 5-й DIV примерно так:

   div style="clear: both">

Это 5-е деление не засчитывается в ваши 8 делений содержания.