css позиционирование ребенка divs

Question

Можно ли это сделать css (и как)?

 
------------------------------------------ 
| ---------- ---------- ---------- | 
| | Child 1 | | Child 3 | | Child 5 | | 
| ---------- ---------- ---------- | 
| ---------- ---------- ---------- | 
| | Child 2 | | Child 4 | | Child 6 | | 
| ---------- ---------- ---------- | 
| ----------       | 
| | Child 7 |       | 
| ----------       | 
| ----------       | 
| | Child 8 |       | 
| ----------       | 
------------------------------------------ 

, используя следующие:

<div class="parent"> 
    <div class="child">Child1</div> 
    <div class="child">Child2</div> 
    <div class="child">Child3</div> 
    <div class="child">Child4</div> 
    <div class="child">Child5</div> 
    <div class="child">Child6</div> 
    <div class="child">Child7</div> 
    <div class="child">Child8</div> 
</div> 

.parent {width:100%} 
.parent div {width:100px; margin:2px;} 

Edit: Может быть, я не четко объяснить, что я хочу ... так

1. Там может быть более 8 детей. .... но всегда четное число (10,12,14 и т. д.)

2. A div с четным номером mus t всегда под его предыдущим нечетным div (2 под 1, 4 под 3 .... 8 под 7, 10 под 9)

3. Если ширина родителя недостаточна, чтобы удерживать пары childer: она увеличивает свою высоту (как начинает новую строку)

edit2: правильный результат здесь: http://jsfiddle.net/97ZpN/3/

, но в этом решении я должен был поместить каждую пару дивы в суб-контейнера. Можно ли сделать это с оригинальным html?

Answer 1

надеюсь, что это поможет вам

.parent {width:100%} 
.parent div {float:left; margin:2px;width:30%} 
.parent div.child:nth-child(7),.parent div.child:nth-child(8){ 
    float:none; 
    clear:both; 
} 

демо: http://jsfiddle.net/97ZpN/

Объяснение:

.parent div {float:left; margin:2px;width:30%} 

Эта линия в CSS сделает все дочерние элементы, чтобы плыть в направлении влево , Таким образом, элементы будут автоматически складываться один за другим.

.parent div.child:nth-child(7),.parent div.child:nth-child(8){ 
     float:none; 
     clear:both; 
    } 

Чистота: оба делают трюк здесь. clear: оба средства не могут содержать никаких элементов с левой или правой стороны ссылочного элемента.