CSS交替排列爲基礎

我不知道如何確切地調用我的問題，因此神祕的標題。CSS交替排列爲基礎

我的情況是這樣的：

<div class="widget full">foobar</div> 
<div class="widget half">left</div> 
<div class="widget half">right</div> 
<div class="widget half">left</div> 
<div class="widget full">foobar</div> 
<div class="widget full">foobar</div> 
<div class="widget half">left</div> 
<div class="widget half">right</div>

我讓這些小部件浮動左右的基礎上，奇數或偶數CSS：

#main > div.widget.full { display: block; width: 100%; } 
#main > div.widget.half { display: block; width: 49%; } 
#main > div.widget.half:nth-child(2n+1) { float: right; }

作品像第一魅力2'半'，但之後的2被第三'一半'搞砸了。最後2個是'顛倒的順序'。我需要的是某種重置或其他解決方案，將div放在正確的位置，而不管它們之間是什麼。

如果沒有CSS的答案，我可以修復它在PHP中生成它們，但CSS是我的首選，因爲它的風格問題。

在此先感謝

來源

2013-07-09 Pokepoke

jsfiddle真的會幫助讓人們明白你的意思，因爲每個人只有*兩半* – raam86

看起來你正在試圖建立一個網格佈局。 CSS不能可靠地做* * *。另一方面，爲了清楚起見，如果這是你要做的事情，使用「n-child（奇數）」和「n-child（偶數）」符號 - 對於大多數隨便的觀察者來說，'n'-notation不是一半。 –

如果您通過PHP輸出代碼，您是否可以不通過此類指定類來爲您的div提供更大的粒度？還是僅僅是每個其他的'半'div漂浮在右邊？ –

不幸的是，你將無法通過CSS來實現這一點。

這個選擇：

#main > div.widget.half:nth-child(2n+1)

不會尋找2n+1.widget.half出現兒童的，而是將僅靶向.widget.half元素是兒童號1，3，5，等等

來源

2013-07-09 11:02:10 mishik

我喜歡這個問題已經被倉鼠詢問和回答的事實:) –

@AndrewMorris Beyonce錯了，hampsters統治着世界;） – Pokepoke

作爲替代，除非有任何理由說您的div需要堅持左邊或右邊，你不能只適用float:left到每個.half div和clear:both到你的完整的？

在這個例子似乎做工精細

CSS

#main > div.widget.full { 
    display: block; 
    width: 100%; 
    outline: solid 1px blue; 
    clear:both; 
} 
#main > div.widget.half { 
    display: block; 
    width: 49%; 
    outline: solid 1px red; 
    float:left; 
}

JsFiddle - 我加了一些顏色，所以它會看到更明顯。

來源

2013-07-09 11:33:02

CSS交替排列爲基礎

回答

相關問題