CSS - Несколько встроенный блок DIV, чтобы пополнить

Question

Как я выровнять несколько строкового блока DIV-х друг над другом, если больше DIV находится слева, как так: EXAMPLE

Я пытаюсь сделать две коробки идти ниже двух других, но они помещают их под более крупным div.

HTML:

<div class="container"> 
<div class="big"></div> 
<div class="box"></div>  
<div class="box"></div> 
<div class="box"></div>  
<div class="box"></div> 
</div> 

CSS:

.container{  
border: 1px black solid; 
width: 320px; 
height: 150px; 
text-align:center;  
} 

.box{ 
display: inline-block; 
width: 20%; 
height: 30%; 
border: 1px black solid; 
background: blue; 
vertical-align:top; 

} 

.big { 
display: inline-block;  
border: 1px black solid; 
width: 40%; 
height: 60%; 
background: beige;  
} 

Любая идея, как я бы это сделать?

EDIT: Я знаю, что это можно сделать, плавая все влево. Тем не менее, я все равно хотел бы сохранить выравнивание центра от основного контейнера.

Answer 1

Добавить float:left в оба класса. Включите дочернюю оболочку div.

.child_wrapper{ 
     display: inline-block; 
     width: 100%; 
     height: 150px; 
     margin:0 8% 
    }  
    .box{ 
     display: inline-block; 
     width: 20%; 
     height: 30%; 
     border: 1px black solid; 
     background: blue; 
     vertical-align:top; 
     float:left 

    } 

    .big { 
     display: inline-block;  
     border: 1px black solid; 
     width: 40%; 
     height: 60%; 
     background: beige; 
     float:left 
    } 

DEMO Updated

Answer 2

float:left Добавить в .big классе вашего CSS. И если вы удалите margin, добавьте float:left в класс .box.

WORKING LINK

HTML:

<div class="container"> 
    <div class="big"></div> 
    <div class="box"></div>  
    <div class="box"></div> 
    <div class="box"></div>  
    <div class="box"></div> 
</div> 

CSS:

.container{ 

    border: 1px black solid; 
    width: 320px; 
    height: 150px; 
    text-align:center; 

} 

.box{ 
    display: inline-block; 
    width: 20%; 
    height: 30%; 
    border: 1px black solid; 
    background: blue; 
    vertical-align:top; 

} 

.big { 
    display: inline-block;  
    border: 1px black solid; 
    width: 40%; 
    height: 60%; 
    background: beige; 
    float:left 
} 

Answer 3

Там нет необходимости использовать display:inline-block; Просто только float:left сделать трюк.

.box{ 
    float:left; 
    width: 20%; 
    height: 30%; 
    border: 1px black solid; 
    background: blue;   
} 

.big { 
    float:left; 
    border: 1px black solid; 
    width: 40%; 
    height: 60%; 
    background: beige;  
} 

Working Fiddle