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

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

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

这就是你所需要的一切。

Answer 2

首先，包含div的宽度必须设置为=或＆gt;比浮动的组合宽度，它是如何知道移动到下一行。

例如......

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

你的CSS对你想要实现的布局没那么有意义，它应该是：

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

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

麻烦浮动Divs正确

3 个答案: