html - 2 つの CSS 要素がコンテナを横に並べて余白で満たすようにする

Question

2 つの要素が親の幅の正確な割合を占めるようにしたいのですが、それらを離すマージンも必要です。次のマークアップがあります。

<div class='wrap'>
  <div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>​

.wrap {
  background:red;
  white-space:nowrap;
  width:300px;
}
.element {
  background:#009; color:#cef; text-align:center;
  display:inline-block;
  width:50%;
  margin:4px;
}

http://jsfiddle.net/NTE2Q/でわかるように、その結​​果、子がラッパーをオーバーフローします。

スペースに収まるようにするにはどうすればよいですか？悲しいことに、box-sizing:margin-boxこのケースにはありません。

Answer 1

テクニック #1 - 最新の CSS3calc()

CSS3 のcalc()lengthを使用して、幅を次のように設定することでこれを行うことができます.element。

.element {
  width: 49%;                     /* poor approximation for old browsers    */
  width: calc(50% - 8px);         /* standards-based answer for IE9+, FF16+ */
  width: -moz-calc(50% - 8px);    /* support for FF4 - FF15                 */
  width: -webkit-calc(50% - 8px); /* support for Chrome19+ and Safari6+     */
}

デモ: http://jsfiddle.net/NTE2Q/1/

^{これをサポートするブラウザーとバージョンの詳細については、http://caniuse.com/calcを参照してください。}

 

---

テクニック 2 - 昔ながらのラッピング

複数の要素を重ねて計算することができます。この場合、幅 50% で 4px のパディングを持つラッパーで各「要素」をラップします。

<div class='wrap'>
  <div class='ele1'>
    <div class='element'>HELLO</div>
  </div><div class="ele1">
    <div class='element'>WORLD</div>
  </div>
</div>​

.ele1 {
    display:inline-block;
    width:50%;
    padding:4px;
    box-sizing:border-box;          /* Make sure that 50% includes the padding */
    -moz-box-sizing:border-box;     /* For Firefox                             */
    -webkit-box-sizing:border-box;  /* For old mobile Safari                   */
}
.element {
    background:#009; color:#cef; text-align:center;
    display:block;
}

デモ: http://jsfiddle.net/NTE2Q/2/

な

 

---

テクニック #3 - (CSS) テーブルの使用

ラッパーを「テーブル」として扱い、各要素を同じ行内のセルとして扱うことによって、同じ結果を得ることができます。これにより、要素間の空白は重要ではなくなります:

<div class='wrap'>
  <div class='element'>HELLO</div>
  <div class='element'>WORLD</div>
</div>​

.wrap {
    background:red;
    width:300px;
    display:table;
    border-spacing:4px
}
.element {
    background:#009; color:#cef; text-align:center;
    width:50%;
    display:table-cell;
}
​

デモ: http://jsfiddle.net/NTE2Q/4/

この最後の手法は 2 つの要素間の 4 ピクセルの間隔を縮小することに注意してください。一方、最初の 2 つの手法では、2 つのアイテムの間に 8 ピクセル、端に 4 ピクセルが表示されます。

Answer 2

上記の手法はどれも、クロスブラウザーで一貫して十分に機能しませんでした。display:table-cellを使用すると、2 つ以上の要素を隣り合わせに配置できる、わずかに異なる手法が見つかりました。これが実際の動作例です。

CSS:

    display:table-cell;
    background:#009; color:#cef; text-align:center;
    width:22%; /*Set percentage based on # of elements*/
    border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/

div が として扱われるようになったため、ラッパーも必要なくなりました<td>。

Answer 3

可能な限りPhorgz の手法を使用することを強くお勧めしますが、ラッパーを 1 つだけ使用して効果を達成する昔ながらのcalc() 方法も提案したいと思います。position: relative

.two-blocks-by-side() LESS ミックスイン:

.two-blocks-by-side(@padding) {
  padding: @padding (@padding + @padding / 2);
  font-size: 0;

  & > div {
    position: relative;
    display: inline-block;
    font-size: initial;
    width: 50%;

    &:first-child { left: -1 * @padding / 2 };
    &:last-child { right: -1 * @padding / 2 };
  }
}

JS ビンの例