對齊頂部的內嵌塊元素

如何讓兩個（或多個）浮動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; 

}

來源

2014-01-30 thomas

你可以提供一個jsfiddle鏈接的代碼問題？ – Nitesh

哦..從來沒有這樣做過.. – thomas

得到www.jsfiddle.net粘貼你的代碼和ctrl + s這就是它 - @thomas – Nitesh

這有什麼好做~~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;，因爲這裏沒有任何東西在浮動，所以您可以擺脫那些未使用的屬性。

來源

2014-01-30 12:51:08

謝謝Mr.Alien – thomas

@thomas歡迎:) –

也許這個代碼將有助於你： 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>

來源

2014-01-30 12:24:36 mcmac

對不起，我粘貼了一個更早的（和不同的）版本的代碼。請參閱我的jsFiddle – thomas

確定這是您的最新版本的解決方案 - > http://jsfiddle.net/jf936/6/ – mcmac

float：left使它「在容器外生長」。檢查http://jsfiddle.net/jf936/13/ – thomas

你在這裏。

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

希望這有助於。

來源

2014-01-30 12:34:03 Nitesh

嗨。它仍然「在容器外生長」（缺少更好的詞）。這一切都進入MVC5應用程序的頭部和底部版權的東西... – thomas

這是一個不同的問題。它與這段代碼無關。 - @thomas – Nitesh

檢查http://jsfiddle.net/jf936/13/ – thomas

對齊頂部的內嵌塊元素

回答

相關問題