Html 从顶部对齐内联块元素

如何使两个（或更多）浮动div看起来像“大按钮”，并让它们浮动和水平？我的问题是箱子“部分水平”。。。一个稍微低于另一个。我曾尝试在adminBox上使用

float:left

，但随后它们在容器外增长。有人能帮我吗

我使用了以下HTML代码： （）

---

也许这段代码会对您有所帮助：

.container{
背景颜色：浅蓝色；
溢出：隐藏；
}
管理员信箱{
高度：200px；
宽度：200px；
背景颜色：绿色；
颜色：白色；
边界半径：7px；
填充：7px；
显示：块；
保证金：5px；
浮动：左；
}
.adminBox h2{
颜色：白色；
字体大小：20px；
文本对齐：居中；
}
.adminBoxLargeContent{
字体大小：70px；
文本对齐：居中；
填充：0；
保证金：0；
线高：1；
}
.adminBox.adminBoxSmallContent{
文本对齐：居中；
}
管理用户
注册用户
管理模板

给你

CSS代码更改：

.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
    float:left;
}

---

希望这能有所帮助。

这与

浮动无关，问题是您使用的是
显示：内联块因此元素与基线对齐，为了解决这个问题，您需要使用
垂直对齐：top


注意：您不必使用
float:none因为这里没有浮动的内容，所以你可以去掉那些未使用的属性。
你能为问题中的代码提供一个JSFIDLE链接吗？哦。。以前从未这样做过..访问www.jsfiddle.net粘贴您的代码并按ctrl+s键即可-@thomasdone:@thomas这是您想要的吗？抱歉，我粘贴了代码的早期（和不同）版本。请参见我的JSFIDDLFLOAT:left使其“生长在”容器之外。我不知道你在说什么。外面长什么。在我的回答中，我使用“左浮动”和“显示块”来显示方框和“隐藏溢出”。一切正常。如果要使用显示内联块，请不要使用浮点。在上一个小提琴中，您仍然使用display inline blockHi。它仍然“在容器外生长”（缺少更好的词）。这一切都是在一个MVC5应用程序中进行的，它的标题和底部都有版权……这是另一个问题。这和这个密码没有任何关系@托马斯
.container{
background-color: light-blue;
}
.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
}

.adminBox h2{
    color:white;
    font-size:20px;
    text-align:center;

}

.adminBoxLargeContent{
    font-size: 70px;
    text-align:center;
    padding: 0;
    margin: 0;
    line-height: 1;

}

.adminBox .adminBoxSmallContent{
    float: none;
    text-align:center;

}

.container{
    background-color: light-blue;
    overflow:hidden;
}
.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: block;
    margin: 5px;
    float:left;
}
.adminBox h2{
    color:white;
    font-size:20px;
    text-align:center;
}
.adminBoxLargeContent{
    font-size: 70px;
    text-align:center;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.adminBox .adminBoxSmallContent{
    text-align:center;
}

<div class="container">
    <div class="adminBox">
        <h2>Manage users</h2>
        <div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
        <div class="adminBoxSmallContent">Registered users</div>
    </div>

    <div class="adminBox">
        <h2>Manage templates</h2>
        <div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
    </div>
</div>

.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
    float:left;
}

.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
    vertical-align: top; /* Add this here */
}