Несколько DIV с одинаковой шириной в контейнере

Question

Я пытаюсь разместить несколько див с одинаковой шириной внутри контейнера в том же строке, как показано ниже

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

Контейнер имеет ширин: 100%; Мне удалось разместить 3 divs в том же ряду. float: слева; дисплей: встроенный блок; , но я не мог зафиксировать ту же ширину для нескольких 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>