CSS佈局按鈕/我遇到一個麻煩佈局文本麻煩

Question

- 拍下這一刻：

我有一些文字圓形灰色框，裏面的2個按鈕。

灰色框是頁面的寬度（約900px），按鈕的寬度是250px。

該文本寬度爲300px。

我想要兩個按鈕右對齊，文本左對齊。

這是我的基本佈局：

<div id="grey_box"> 

<p class="text"></p> 

<div class="buttons"> 

<a class="button1"></a> 

<a class="button2"></a> 

</div> 

</div> 

出於某種原因，該文本總是出現上面的扣子，我希望他們都成爲盒的中心（縱英明）灰箱約80px中高度。

這裏是我的CSS：

#grey_box { 
    height: 80px; 
    background: #f4f4f4;  
    width: 900px; 
    margin: 0 0 20px 20px; 
} 

.text { 
    float: left; 
    width: 450px; 
} 

.buttons { 
    float: right; 
    margin-right: 20px; 
    width: 450px; 
} 

底下是我想要的一個粗略的想法。

Answer 1

的問題是，你的總寬度超過容器寬度，這樣的按鈕跳轉到段後的下一行。計算寬度時需要考慮邊界，邊距和填充。

看到這種修正jsFiddle example

#grey_box { 
    height: 80px; 
    background: #f4f4f4; 
    width: 900px; 
    margin: 0 0 20px 20px; 
} 
.text { 
    float: left; 
    width: 350px; 
} 
.buttons { 
    float: right; 
    margin-right: 20px; 
    width: 450px; 
    padding:20px; 
    text-align:right; 
} 

Answer 2

這是因爲這些按鈕的div你必須是450個像素寬，並具有20像素的保證金的權利。可用空間：900px不足，因爲您在灰色方框中實際需要450 + 450 + 20像素的空間。此外，按鈕需要500px的空間，因爲它們每個都是250px。嘗試將灰色框的寬度增加到1000，或者增加按鈕div的大小並減小文本div的大小。

或者，您也可以使用表格，並將這些表格格式化爲單獨的表格單元格。

<table> 
<tr> 
<td align=left width=300> Text here</td> 
<td align=right width=250> Button 1</td> 
<td align=left width=250> Button 2</td> 
</tr> 
</table> 

Answer 3

你有正確的想法，但你的元素對於他們的容器來說太寬了。讓元素在特定大小的容器中垂直居中的最簡單方法是使用display: table屬性。

http://tinker.io/e4409/1

#grey_box { 
    height: 80px; 
    background: #f4f4f4;  
    width: 900px; 
    margin: 0 0 20px 20px; 
    display: table; 
} 

.text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 450px; 
} 

.buttons { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 20px; 
    /*text-align: right;*/ 
}