垂直 div 间距答案

【问题标题】：Vertical Div Spacing垂直 div 间距
【发布时间】：2011-08-16 22:49:59
【问题描述】：

如何用最少的代码横向分布3个div？

我有 3 个具有相同类的 div，我需要将它们水平分布，每个 div 之间有 19 像素的空间。

我目前的解决方案是为前 2 个 div 赋予 19 像素的右边距，并为第 3 个 div 分配一个单独的类，使其左边距为 19 像素。

这可以完成工作，但我觉得可能有更好的方法来完成它。理想情况下，所有 3 个 div 仍然具有相同的类。

【问题讨论】：

【解决方案1】：

见：http://jsfiddle.net/thirtydot/q6Hj8/

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

使用adjacent sibling combinator 将margin-left 应用于前面有.yourDivClass 的每个.yourDivClass - 换句话说，除第一个之外的所有.yourDivClass。

【讨论】：

【解决方案2】：

你只需要有右边距的两列；第三列不需要额外的边距。添加了边框，以便您可以在小提琴中看到它。

div.hasMargin
{
    右边距：19px；
}

div.column
{
    边框颜色：黑色；
    边框样式：实心；
    边框宽度：1px；
    向左飘浮;
}

【讨论】：

我认为@thirtydot 很简单。
如果你想使用它（唯一的理由是 IE6 支持），你最好添加反转它并添加单个 noMargin 类而不是多个 hasMargin 类：@ 987654322@