css - 无法正确浮动 div

Question

我的 div 正在显示楼梯效果，如下所示。通常在您可以使用的表格中vertical-align: top，不知道如何为 div 执行此操作。

 ____1_____     
            _____2_____      
                        ______3_____

到目前为止，我拥有的 CSS 是：

   .areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto; 
width:130px;
padding:5px;
}

HTML 是：

<div>
<div class="areadiv">
content
</div>
</div> 

Answer 1

好的，首先包含的 div 的宽度必须设置为 = 或 >，而不是浮动的组合宽度，这就是它知道移动到下一行的方式。

例如..

.areadiv 
{
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

.containerdiv 
{
    width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}

和 HTML：

<div class="containerdiv">
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
</div>

Answer 2

我和@bartolsthoorn 一起说你的CSS 很混乱。但我不会使用 float 我只会使用display: inline-block. 当您使用时，inline-block您必须记住设置vertical-align以及大多数（所有？）浏览器默认设置为middle：

.areadiv {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

这就是你所需要的。

Answer 3

您的 CSS 对于您要实现的布局没有太大意义，它应该是：

.areadiv {
  float: left;
  display: block;
  width: 130px;
  padding: 5px;
}

用于使margin: 0 auto;容器 div 居中，您不需要内联块。