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

对于那些寻找解决方案以设置N div之间间隔的人来说，这是使用伪选择器的另一种方法：

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。

Answer 4

您需要在两个格之间装订一个装订线，如下所示

页边距（装订线）=宽度-装订线尺寸例如保证金= calc（70％-2em）

<body bgcolor="gray">
<section id="main">
        <div id="left">
            Something here     
        </div>
        <div id="right">
                Someone there
        </div>
</section>
</body>
<style>
body{
    font-size: 10px;
}

#main div{
    float: left;
    background-color:#ffffff;
    width: calc(50% - 1.5em);
    margin-left: 1.5em;
}
</style>

设置div之间的空间

4 个答案: