沒有多餘的HTML標記 - 但一類變化& 無僞元素
一個簡單的技巧這可能應該工作爲你: http://jsbin.com/owejal/65/edit
截圖:
將與節點:)的所有可能的數工作
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
是各種寬度的'。集團'容器是你想要解釋的嗎?例如,總是會有3個以下的元素和4個以上的元素?或者你更喜歡這個在飛行中適應? –
子元素的數量及其維度事先未知。 – Gajus
據我所知,這不能在純css中完成,因爲沒有辦法讓css知道孩子什麼時候會換行到新行 – Muleskinner