復位浮第二列後

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

不.b復位後float;

什麼我試圖acheive就像

test test2 
test test2 
test test2 
test test2

兩列的列表，其中兩列都有固定寬度

是這裏的任何方式僅使用CSS來acheive我的目標是什麼？（無HTML標記的變化）

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

來源

2013-10-07 zb'

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

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

Example

爲了給div容器的寬度/背景，你可以添加這個（見here）：

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

Example

來源

2013-10-07 05:10:40 grc

1+似乎這樣說，這是任擇議定書想要什麼做出這樣的佈局.. –

也不錯，但這種方式'.test'不做展開，內容:( http://jsbin.com/aJiMECE/9/edit在這個演示的最後一塊我表明我想acheive什麼，但是這requered HTML變化 –

@eicto是[這]（http://jsfiddle.net/tfXNj/1/）你在找什麼？ – grc

你要這樣呢？ jsFiddle here

這似乎是你正在努力實現的佈局 - 除非我失去了一些東西。

CSS

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

來源

2013-10-07 04:51:58

沒辦法，如果我還是希望有'.test'不匹配SUMM collumns的寬度是多少？像這裏：http://jsbin.com/aJiMECE/2/edit 這個想法是有.test作爲獨立塊; –

@eicto仍然不完全理解..'.a' /'.b'將會有固定的寬度 - 但父母'.test'不應該？你試圖達到哪個例子..？ –

是的，或固定寬度比他們的更SUMM，我可以使用'.a'和包裝'.b'，但只是想了解如果有必要 –

復位浮第二列後

回答

相關問題