css

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;    
}

知道我将如何完成这个吗？

编辑：我知道这可以通过将所有内容浮动到左侧来完成。但是，我仍然希望保持与主容器的中心对齐。

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

在 css 的 .big class 中添加 float:left。如果您删除 margin 然后在 .box class 中添加 float:left。

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

css - 多个内联块 DIV 到顶部

css - Multiple inline-block DIV's to top

html

vertical-alignment