css - コンテナー内の同じ幅の複数の div

Question

以下のように、同じ行のコンテナ内に同じ幅の複数の div を配置しようとしています

    ++++++++++++++++++++++++++++++
    + ++++++++ ++++++++ ++++++++ +
    + +      + +      + +      + +
    + + box1 + + box2 + + box3 + +
    + +      + +      + +      + +
    + ++++++++ ++++++++ ++++++++ +
    ++++++++++++++++++++++++++++++

コンテナーの幅は 100% です。3 つの div を同じ行に配置することに成功しました。フロート: 左; 表示: インラインブロック; しかし、複数の div で同じ幅を修正できませんでした。

Answer 1

div を別の div 内にラップしてみてください。

コード：

     div { border: 2px solid red; } 
     div.wrapper { 
     border: 2px solid blue;
     display: inline-block;

}

HTML コード:

    <div class="wrap">
    <div class="wrap">
    <div style="width: 100px; height: 83px;">This is good</div>
    </div>
    </div>

参照: div を作成して 2 つの float div を内側にラップする方法は? 、

div での CSS ワードラップ、

このようにdivをラップする方法は?

Answer 2

表示テーブル プロパティを使用する

.tbl {
  display: table;
  width: 100%;
}

.tbl .row {
  display: table-row;
}

.tbl .row div {
  display: table-cell;
  background-color: pink;
}

<div class="tbl">
  <div class="row">
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
  </div>
</div>