Question

我有这个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>

我希望“left”和“right”div占据屏幕的整个宽度，所以我将它们的宽度设置为50％。

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

感谢。

Answer 1

没有足够的空间让它们对齐，因为它们各占50％，你需要添加4个3px边距，因此总数需要100％+ 12px，因此无法对齐。

Answer 2

请参阅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以及您想要的边距，填充和边框。

Answer 3

添加：

display:inline-block;

到你的#left和#right ..

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

Answer 4

这是因为左边的边框和边距为50％+ 1px，右边的1px等于50％。使用box-sizing: border-box;确保你的div是50％，而不是更多边框。

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

Answer 5

您遇到的问题是您在这些div上设置了边框和边距，因此它们会注意并排放置50％的宽度。如果你不在固定宽度的容器内工作，你应该使用48％的宽度。

水平堆叠DIV

5 个答案: