Question

我有以下布局：

HTML：

<div class="test">
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
</div>

CSS：

.test .a,.test .b {
  float: left;
  width: 100px; 
}

.test .a:nth-child(4n+1) , .test .b:nth-child(4n+2) { 
  background: lightgreen;
}


.test .b:after {
  clear: both;
  display: block;
  content: "\a";  
}

在float;

之后，它不会重置.b

我试图实现的是两列列表，如

test test2
test test2
test test2
test test2

其中两列的宽度都是固定的

有没有办法只使用CSS实现我的目标？（没有html标记更改）

http://jsbin.com/aJiMECE/12/edit

Answer 1

您可以使用:nth-child()：

.test .a:nth-child(2n+1) {
    clear: both;
}

Example

要给容器div一个宽度/背景，你可以添加它（见here）：

.test {
    background: red;
    width: 400px;
    overflow: hidden;
}

Example

Answer 2

你想要这样的东西吗？ jsFiddle here

这似乎是你想要实现的布局 - 除非我遗漏了什么。

<强> CSS

.test {
    width:200px;
}
.test > div {
    width:100px;
}
.a {
    float:left;
}
.b {
    float:right;
}

第二列后重置浮点数

2 个答案: