垂直部分間距

如何以最少量的代碼水平分配3個div？垂直部分間距

我有3個div具有相同的類，我需要水平分配它們，每個div之間有19個像素的空間。

我現在的解決方案是給第一個2個div的右邊界19個像素，併爲第三個div分配一個單獨的類，給它一個19像素的左邊界。

這可以完成工作，但我覺得可能有更好的方法。理想情況下，所有3個div仍然會有相同的類別。

2011-08-16 sheepgobeep

參見：http://jsfiddle.net/thirtydot/q6Hj8/

.yourDivClass + .yourDivClass { 
    margin-left: 19px 
}

使用該adjacent sibling combinator申請margin-left每.yourDivClass它由.yourDivClass之前 - 換句話說，所有除第一。

來源

2011-08-16 14:41:22 thirtydot

謝謝！這很好。這是我第一次碰到css選擇器。跨瀏覽器的任何兼容性/支持問題？ – sheepgobeep

不客氣。「+」在任何地方都可以使用，*除了古代的IE6（你不應該再關心）。 – thirtydot

您只需要兩列右邊距;第三欄不需要額外的保證金。添加了邊框，以便您可以在小提琴中看到它。

div.hasMargin 
{ 
    margin-right: 19px; 
} 

div.column 
{ 
    border-color: black; 
    border-style: solid; 
    border-width: 1px; 
    float: left; 
}

這裏是一個fiddle

來源

2011-08-16 14:49:59 DwB

我覺得@thirtydot簡單明瞭。 – Sparky

如果你想使用這個（唯一的原因是IE6的支持），你最好添加反轉它，並添加一個'noMargin'類而不是多個'hasMargin'類：http://jsfiddle.net/ jkLAK/1 / – thirtydot

垂直部分間距

回答

相關問題