对齐顶部的内嵌块元素

Question

如何让两个（​​或多个）浮动div看起来像“大按钮”，并让它们浮动并变平？我的问题是这些盒子“部分被夷为平地”......其中一个比另一个略低。我试图在adminBox上使用float: left，但随后他们在容器外生长。谁能帮我？

我已经使用这个HTML代码： （http://jsfiddle.net/jf936/13/）

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

而这种风格：

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

} 

Answer 1

这有什么好做float，问题是，你正在使用display: inline-block;，因此元件排列基线，序来解决这个问题，你需要使用vertical-align: top;

Demo

.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 */ 
} 

注意：您不必使用float: none;，因为这里没有任何东西在浮动，所以您可以摆脱那些未使用的属性。

Answer 2

也许这个代码将有助于你： jsfiddle

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

Answer 3

你在这里。

WORKING DEMO

CSS代码变化：

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

希望这有助于。