35

私はこのような2つの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を修正するように設定されていなかったと思います。どうやってするの？

4

4 に答える 4

58

div間の間隔を設定するための解決策を探している人のためにN、疑似セレクターを使用した別のアプローチを次に示します。

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

子の疑似セレクターを組み合わせることもできます。

div:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}
于 2016-09-19T11:56:18.977 に答える
32

両方を同じ方法でフロートさせ、40pxのマージンを追加します。2つの要素が反対方向に浮いている場合、制御がはるかに少なくなり、含まれている要素によってそれらがどれだけ離れているかが決まります。

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}
于 2012-04-07T08:22:40.573 に答える
3

Ndiv間の間隔の別の解決策は次のとおりです。

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

+私たちはcssセレクターを活用しています。<div>要素の直後に配置されている要素のみを選択し<div>ます。

注意：ここでは設定しmargin-leftていませんmargin-right。

于 2021-07-26T20:14:53.810 に答える
2

2つのdivガターの間にガターが必要です次のように作成できます

margin（gutter）= width-gutter size例：margin = 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>
于 2018-07-22T18:06:45.947 に答える