Выравнивание нескольких Div внутри div

Question

У меня такой вид структуры.

<div id = "div"> 
    <div id = "div1"> 
     <div id = "div11"></div> 
     <div id = "div12"></div> 
    </div> 
    <div id = "div2"> 
     <div id = "div21"></div> 
     <div id = "div22"></div> 
     <div id = "div23"></div> 
     <div id = "div24"></div> 
     <div id = "div25"></div> 
    </div> 
</div> 

Для div2 Я хочу, чтобы все внутренние div должны были входить в линию.

Я хочу, как этот struuectue

[div21] [div22] [div23] [div24]

и пятый ДИВ должен спуститься на всех четырех дел.

Я попытался с поплавком влево и вправо, положение, но я не могу этого сделать.

Пожалуйста, расскажите мне, как я могу это сделать?

Answer 1

Попробуйте

#div21,#div22,#div23,#div24{ 
    display:inline-block; 
} 

Answer 2

Попробуйте использовать Bootstrap строк и столбцов метод. Загрузите файл bootstrap css с this website. Ссылка на файл CSS с кодом, а затем вы можете попробовать это:

<div id = "div"> <div id = "div1"> <div id = "div11"></div> <div id = "div12"></div> </div> <div id = "div2"> <div class="row"> <div id = "div21" class="col-md-3"></div> <div id = "div22" class="col-md-3"></div> <div id = "div23" class="col-md-3"></div> <div id = "div24" class="col-md-3"></div> </div> <div class="row"> <div id = "div25" class="col-md-12"></div> </div> </div> </div>

Ширина DIV может быть изменена путем изменения значений в Col-мкр-3. Диапазон значений будет 1-12. Но в строке div общий размер должен быть 12.

Answer 3

Flexbox может это сделать.

#div2 { 
 
    display: flex; 
 
} 
 
#div2 > div { 
 
    height: 50px; 
 
    padding: 0 25px; 
 
    bordeR: 1px solid grey; 
 
    margin: 0 .25em; 
 
} 
 
#div25 { 
 
    flex: 1; 
 
}

<div id="div2"> 
 
    <div id="div21"></div> 
 
    <div id="div22"></div> 
 
    <div id="div23"></div> 
 
    <div id="div24"></div> 
 
    <div id="div25"></div> 
 
</div>