设置div之间的空间

Question

我有两个像这样的div:

<section id="main">
        <div id="left">
            <asp:ContentPlaceHolder ID="left" runat="server" />
        </div>
        <div id="right">
            <asp:ContentPlaceHolder ID="right" runat="server" />
        </div>
</section>

这是我的css:

#left
{
    float: left;
    margin-right: 17px;

}

#right
{
    float: right;
}

我希望div之间的空间为40px.我尝试在我的CSS中添加填充,边距和宽度,但我认为它没有将填充设置为正确的40px.怎么做？

Answer 1

对于寻找解决方案来设置Ndiv 之间间距的人来说,这是使用伪选择器的另一种方法:

div:not(:last-child) {
  margin-right: 40px;
}

您还可以组合子伪选择器:

div:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}

Answer 2

以相同的方式浮动它们并添加40px的边距.如果你有两个相反浮动的元素,那么你将拥有更少的控制权,而包含元素将决定它们之间的距离.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

Answer 3

N 个 div 之间的间距的另一种解决方案可以是：

div + div {
  margin-left: 40px;
}

我们正在利用+css 选择器。它只选择<div>紧接在<div>元素之后的元素。

注意：我们设置的margin-left不是margin-right这里。