Question

我有2个阻止，red阻止width: fixed height: auto，green阻止width和height fixed，我不知道如何对齐{{1}阻止它将在底部，现在它在顶部; 可以看到示例：http://jsfiddle.net/MXqTY/3/

Answer 1

添加：

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

并删除float: left。

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

Answer 2

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

绿色块与其他浮动块对齐的原因是浮动自动将所有元素移动到包含元素内的指示位置。您可以看到该定义here on MDN.

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

Answer 4

对于.square2，请添加：

margin-top:110px;

CSS对齐2块底部

4 个答案: