2

我有这个 HTML 片段：

<style>
    #top, #left, #right
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }
</style>
<div>
    <div id="top">Text</div>
    <div id="left">Text</div>
    <div id="right">Text</div>
</div>

我希望“左”和“右” div 占据屏幕的整个宽度，所以我将它们的宽度分别设置为 50%。

出于某种原因，“左”和“右” div 重叠——“右” div 在“左” div 下方。设置这些 div 样式的正确方法是什么，以便它们并排显示并占据屏幕的整个宽度。

谢谢。

4

5 回答 5

2

没有足够的空间让它们对齐，因为它们每个占 50%，您必须添加四个 3px 的边距，所以总共需要 100% + 12px，因此无法对齐。

于 2012-08-13T14:44:00.413 回答
1

见http://jsfiddle.net/ER8pR/1/

CSS：

   #top, #left>div, #right>div
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }

HTML：

<div>
    <div id="top">Text</div>
    <div id="left"><div>Text</div></div>
    <div id="right"><div>Text</div></div>
</div>

问题是 和 的总#left宽度#top是

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在你的情况下，3px+1px+0+50%+0+1px+3px= 50% + 8px，所以如果你把它们相加，你会得到100% + 16px，它大于100%。

您可以修复它，删除所有边距、填充和边框，并<div>在其中创建一个新的，其中包含width:auto您想要的边距、填充和边框。

于 2012-08-13T14:44:50.970 回答
0

添加：

display:inline-block;

到你的#left 和#right..

div 是块并占据整行，即使它们有宽度！所以使它们成为内联块，以便它们也可以水平堆叠

于 2012-08-13T14:44:08.383 回答
0

那是因为您的边框和边距 50% + 左边 1px 和右边 1px 等于 50% 以上。
用于box-sizing: border-box;确保您的 div 为 50%，而不是更多的边框。

请参阅此示例http://jsfiddle.net/zvMTN/

于 2012-08-13T14:44:53.830 回答
0

您遇到的问题是您在这些 div 上设置了边框和边距，因此它们会注意到并排保持 50% 的宽度。如果您不在固定宽度的容器中工作，您可能应该使用 48% 之类的宽度。

于 2012-08-13T14:45:01.983 回答