多個分度相等的寬度在容器

Question

我試圖放置具有相同的寬度多個div容器內部在同一行如下

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

該容器具有 寬度：100％; 我成功地將3個div放在同一行。 float：left; 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>