Question

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

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

容器有宽度：100％; 我成功地将3个div放在同一行。向左飘浮; display：inline-block; 但我无法为多个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>

参见： how to make a div to wrap two float divs inside?，

CSS word-wrapping in div，

How to wrap divs like this?

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>

容器中具有相等宽度的多个div

3 个答案: