html - css定位子div

Question

是否可以使用 css(以及如何)做到这一点？

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

using the following :

<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;}

编辑:可能我没有解释清楚我想要的是什么……所以

1. 可以有 8 个以上的 child .....但总是偶数(10、12、14 等)

2. 偶数的div一定在他前面的奇数div的下面(2在1下，4在3....8在7下，10在9下)

3. 当父级的宽度不足以容纳成对的子级时:它会扩展它的高度(就像开始一个新行)

编辑2:正确的结果在这里: http://jsfiddle.net/97ZpN/3/

但在这个解决方案中，我必须将每对 div 放入一个子容器中。是否可以使用原始 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:both 在这里起到了作用。 clear:both 表示被引用元素的左侧或右侧不能有任何元素。