0

我在布局时遇到问题 - 想象一下：

我有一个带有一些文本的圆形灰色框，里面有 2 个按钮。

灰色框为页面宽度（约900px），按钮为250px。

文字宽度为 300 像素。

我希望两个按钮右对齐，文本左对齐。

这是我的基本布局：

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

下面是我想要什么的粗略概念。

在此处输入图像描述

4

3 回答 3

0

The issue is that your total width exceeds the container width, so the buttons jump to the next line below the paragraph. You need to factor in the border, margin, and padding when calculating width.

See this corrected 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;
}
于 2013-04-15T16:55:29.607 回答
0

你有正确的想法，但是你的元素对于它们的容器来说太宽了。让元素在特定大小的容器中垂直居中的最简单方法是使用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;*/
}
于 2013-04-15T16:58:29.903 回答
-1

那是因为您拥有的按钮 div 的宽度为 450 像素，右侧有 20 像素的边距。可用空间：900px 是不够的，因为您实际上需要 450+450+20 像素的灰色框空间。此外，按钮需要 500 像素的空间，因为它们每个都是 250 像素。尝试将灰色框的宽度增加到 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>
于 2013-04-15T16:58:20.623 回答