堆栈的DIV水平

我有HTML的这个片段：堆栈的DIV水平

<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的正确方法是什么，以便它们并排显示并占据屏幕的整个宽度。

谢谢。

来源

2012-08-13 user1044169

见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%。

您可以修复它，删除所有边距，填充和边框，并使用width:auto以及所需的边距，填充和边框在其中创建新的<div>。

来源

2012-08-13 14:44:50 Oriol

我最终用这个解决方案进行了一次编辑 - 必须将#left> div，#right> div切换为#left div，#right div，因此它可以在IE7中工作。谢谢。 – user1044169 2012-08-13 15:00:24

这很奇怪，子选择器应该在IE7上工作（但它不在IE 6上）。请参阅http://www.quirksmode.org/css/contents。html＃t11 – Oriol 2012-08-13 15:04:42

对不起，双重检查缓解了它是IE8>没有工作。 – user1044169 2012-08-13 16:51:03

没有足够的空间供他们对齐，因为他们每个都需要添加四个3px页边距的50％，因此总计需要100％+ 12px，因此无法对齐。

来源

2012-08-13 14:44:00 kgautron

地址：

display:inline-block;

您#left和#right ..

div的是块，占据整个行，即使对方给出的宽度！因此，要使他们直列块，这样会水平堆放太

来源

2012-08-13 14:44:08 RGB

你的宽度/边框将会发挥作用......你可能需要将它们从50％减少到49％，或者类似的东西..我会建议在位置div中没有样式并且在div中添加样式到div中位置div来获得完整的效果。 – RGB 2012-08-13 14:45:50

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

看到这个例子http://jsfiddle.net/zvMTN/

来源

2012-08-13 14:44:53

你遇到的问题是，你已经在这些div上设置了边界和边距，所以他们会留意并排保持50％的宽度。如果你不在固定宽度的容器内工作，你应该使用类似48％的宽度。

来源

2012-08-13 14:45:01

堆栈的DIV水平

回答

相关问题