css - 容器中具有相同宽度的多个div

Question

我正在尝试将具有相同宽度的多个 div 放置在同一行的容器中，如下所示

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

容器宽度：100%；我成功地将 3 个 div 放在同一行。向左飘浮; 显示：内联块；但我无法为多个 div 修复相同的宽度。

Answer 1

你可以使用：

.inner-boxes {
  float: left;
  width: 30%;
  margin: 0 1.5%;
}

使每个盒子的宽度为容器宽度的三分之一。

Answer 2

尝试将 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来包装两个浮动div？,

div 中的 CSS 自动换行，

如何包装这样的div？

Answer 3

使用显示表属性

.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>