1

我有 2 个块，red块width: fixed height: auto，green块width和height fixed，我不知道如何对齐green块，它会在底部，现在它在顶部；可以看例子：http: //jsfiddle.net/MXqTY/3/

4

4 回答 4

1

添加这个：

.square1, .square2 {
    display: inline-block;
    vertical-align: bottom;
}

并删除float: left.

http://jsfiddle.net/thirtydot/MXqTY/8/

于 2012-10-22T18:43:46.603 回答
0

从你的类声明中删除 float:left 。默认情况下，它们将堆叠。将两个元素都向左浮动将导致它们水平堆叠。

于 2012-10-22T18:39:52.043 回答
0

添加clear:left;到您的.square2块将解决您的问题。

#wrap{
margin: 0 auto;
}

.square1{
width: 100px;
height: auto;
background-color: red;
float: left;
}
.square2{
width: 50px;
height: 50px;
background-color: green;
float: left;
clear:left;
}
<body>
<div id='wrap'>

    <div class='square1'>tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas  </div>
    <div class='square2'></div>

</div>

您的绿色块与其他浮动块对齐的原因是因为浮动会自动将所有元素移动到包含元素中的指示位置。你可以在 MDN 上看到这个定义。

所有浮动元素将彼此相邻排列，直到它到达容器的末端，此时它会环绕到下一行。通过clear为您添加代码块，.square2您实际上是在告诉它移动到所有相关浮动的边缘，在您的情况下是第一个正方形。

于 2017-03-16T03:49:46.870 回答
-3

对于.square2，添加：

margin-top:110px;
于 2012-10-22T18:38:41.847 回答