Question

我想在另一个内联块旁边对齐两个内联块，以便在它的右边有一个大正方形和两个较小的正方形。两个小方块应该是一个列，这个列应该在大方块的旁边。

所以我首先添加了一个大方块，有一个浮动：左边和第一个小方块。然后我想当我添加最后一个方块时，它会将它放在第一个小方块下面。但不，它把它放在第一个小广场的右边。

以下是一个示例：http://jsfiddle.net/BMYHw/2/和代码：

HTML

<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>

CSS

#i1 {
    background-color: blue;
    width:140px;
    height:140px;
    display: inline-block;
    float:left;
}
#i2 {
    background-color: green;
    width:70px;
    height:70px;
    display: inline-block;
}
#i3 {
    background-color: red;
    width:70px;
    height:70px;
    display: inline-block;
}

所以我想要的是示例中的红色正方形位于绿色正方形下方并坚持蓝色正方形。谢谢！

编辑：问题解决了，谢谢大家的快速答案！

Answer 1

使用display:table;属性来实现此目的。

WORKING EXAMPLE

守则：

#i2 {
    background-color: green;
    width:70px;
    height:70px;
    display: table;
}

这解决了你的目的..

我想要的是示例中的红色正方形位于绿色下方一个坚持蓝色。

希望这有助于。

Answer 2

http://jsfiddle.net/BMYHw/6/ 你需要一个额外的容器来容纳它们。浮动或内联块

.hold {
    display: inline-block;
    vertical-align:top;
    width:50px;
}

Answer 3

将两个小方块放入一个新容器中。即。

<div id="container>  </div>

示例fiddle

将两个内联块对齐到另一个内联块旁边

3 个答案: