1

我想将两个内联块与另一个内联块对齐，以便在其右侧有一个大正方形和两个较小的正方形。两个小方块应该组成一个柱子，这个柱子应该在大方块旁边。

所以我首先添加了大方块，带有一个 float:left 和第一个小方块。然后我想，当我添加最后一个方块时，它会放在第一个小方块的下方。但是不，它把它放在第一个小方块的右边。

这是一个示例：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;
}

所以我想要的只是示例中的红色方块正好在绿色方块的下方并粘在蓝色方块上。谢谢！

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

4

3 回答 3

2

使用display:table;属性来实现这一点。

工作示例

编码：

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

这解决了你的目的..

我想要的是示例中的红色方块刚好在绿色方块的下方并粘在蓝色方块上。

希望这可以帮助。

于 2013-06-21T10:22:05.427 回答
1

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

.hold {
    display: inline-block;
    vertical-align:top;
    width:50px;
}
于 2013-06-21T10:22:22.377 回答
1

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

<div id="container> <!--the two small squares--> </div>

小提琴样本

于 2013-06-21T10:22:55.880 回答