1

親 div の中央に配置された 3 つのインライン要素 (正方形と呼びましょう) があります。私がやりたいことは、最初の正方形を親の左側に、2 番目の正方形を中央に、3 番目の正方形を右側に揃えることです。つまり、四角形の間に均等な内側余白を作成します。

inline-block によってすでに要素にいくらかのマージンが追加されていることを忘れないでください。

HTML:

<div id="five">

<div>
</div>

<div>
</div>

<div>
</div>

</div>

CSS:

#five {

    text-align:center;
    width:1110px;
}

#five > div {

    width:340px;
    background-color:red;
    height:200px;
    display:inline-block;
}
4

2 に答える 2

0

これでこれを達成できます：

<div id="five">
 <div id="left">
 </div>

 <div>
 </div>

 <div id="right">
 </div>
</div>

と：

#five {
 text-align:center;
 width:800px;
}

 #five > div {
  width:140px;
  background-color:red;
  height:200px;
  display:inline-block;
 }
 #left{
  float: left;
 }
#right{
 float: right;
}

このように、左divから左、右divから右に整列します。

デモ

于 2013-08-08T13:10:23.397 に答える