由於有額外的保證金，停止方框會突破到下一行？

不知道這是否有可能，但我認爲這值得提問。由於有額外的保證金，停止方框會突破到下一行？

我想要做的是通過我的PHP腳本輕鬆創建框，我不必檢查每個框（.boxes）所屬的列，行等。我只是想能夠做一個foreach循環的框，並且它們是echo。

這裏就是我所說的：http://jsfiddle.net/LUFFP/4/

在這個例子中，你可以看到，我試圖讓wrapper（#main）忽略margin-right，並有每行有兩個箱子，沒有一點多餘的而不必爲每個其他DIV分配不同的類別。

任何幫助表示讚賞。

來源

2012-02-08 Josh Foskett

您可以使用nth-of-type(2n)來定位每隔一個div。然後將右邊距設置爲零。

http://jsfiddle.net/LUFFP/5/

.boxes_3:nth-of-type(2n) { margin-right: 0px; }

來源

2012-02-08 04:11:41 mrtsherman

看到這篇文章，如果您有興趣，爲什麼你可以選擇'第n-的-type' VS'第n-child'在Danjah的答案。 http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ – mrtsherman 2012-02-08 04:17:43

+1對於第Ⅴ類伏都教，我似乎永遠不會變直。此外，如果您願意忽略對幾個沒有人關心的瀏覽器的支持，那麼它比我的回答更清潔/不那麼討厭。 – Zenexer 2012-02-08 04:23:05

oooh確實有一些巫術 - 好的提示，謝謝@mrtsherman :) – danjah 2012-02-08 20:43:51

根據瀏覽器的要求，有一個CSS3選擇器來做到這一點： http://jsfiddle.net/ttpK6/1/

兼容性列表在這裏：http://kimblim.dk/css-tests/selectors/

來源

2012-02-08 04:14:30 danjah

#main_2 
{ 
    background: #FF0000; 
    width: 404px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 

.boxes_2 
{ 
    background: #F3F3F3; 
    width: 195px; 
    display: inline-block; 
    margin-right: 10px; 
}

注意，我改變了寬度並將溢出設置爲隱藏。沒有特殊的CSS3要求。

來源

2012-02-08 04:16:07 Zenexer

+1 - 我喜歡它禪。「開箱即用」的思考方式。潘打算。 – mrtsherman 2012-02-08 04:17:16

@mrtsherman哈哈，爲什麼感謝你。是的，我想這還是有點不對，不是嗎？溢出的利潤率從不會傷害任何人。 – Zenexer 2012-02-08 04:18:31

不確定您使用的是哪種瀏覽器，但它不適用於最新的Google Chrome瀏覽器。我最初試過這個（'overflow：hidden;'），但沒有結果。 http://jsfiddle.net/LUFFP/7/ http://cloud.rastalulz.com/1U0G2n2y1i1j0I2l2f25 – 2012-02-08 04:21:00

嘗試

#main_2 {background: #FF0000; width: 411px; border: 1px solid #000;} 
.boxes_2 {background: #F3F3F3; width: 205px; float:left;}

來源

2012-02-08 04:18:59

您可以通過將每行預先加上四個空格或使用編輯器中的「{}」按鈕來代碼阻止您的帖子。 – mrtsherman 2012-02-08 04:20:49

如果您添加「overflow：hidden」，只要將寬度更改爲404像素，紅色將消失。 – Zenexer 2012-02-08 04:21:00

由於有額外的保證金，停止方框會突破到下一行？

回答

相關問題