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 的float:left课程中添加.big。如果您删除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

css - 多个内联块DIV到顶部

3 个答案: