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

编辑：也许我没有清楚地解释我想要的东西......所以

可以有超过8个孩子.....但总是偶数（10,12,14等）
具有偶数的div必须始终位于其前面的奇数div（2下1下，4下3 ...... 8下7下，10下9下）
当父母的宽度不足以容纳成对的childer时：它会扩展其高度（就像开始一个新行）

EDIT2：正确的结果如下： 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表示引用元素的左侧或右侧不能有任何元素。

css定位儿童divs

1 个答案: