css漂浮物体

这可能是一个非常简单的问题，但我无法得到它的工作。css漂浮物体

我想要的只有2个盒子（左和右），两者都应占50％的空间，并且应该彼此相邻。

我现在的CSS看起来是这样的：

#left { 
    text-align: right; 
    width: 50%; 
    padding-right: 10%; 
    float: left; 
} 

#right { 
    width: 50%; 
    text-align: left; 
    padding-left: 10%; 
} 

#footer { 
    clear: both; 
}

的HTML看起来像这样：

<div id='left'> 
    <h1>Left</h1> 
    <ul> 
    <li>Some Listing</li> 
    </ul> 
</div> 

<div id='right'> 
    <h1>Stuff</h1> 
    <p> 
    Stuff right 
    </p> 
</div> 

<div id='footer'> 
</div>

正如我所说的，这是行不通的。但我认为应该清楚它应该做什么。

来源

2010-11-01 Kai

有两件事情我需要做的，使其工作：

1）宽度+ DIV每一个的填补只能增加高达50％。否则，在您的原始代码中，它们合计为60％，两者合计为120％，并且它们不能适应身体的100％宽度。

2）我必须还飘起了第二个div的左侧，或使双方的div overflow: hidden

（我仍然在寻找到为什么需要第2步）

来源

2010-11-01 15:46:55

您必须考虑填充和边距。在指定任何除0之外的填充时，在每个<div>上放置50％将导致<div>换行。尝试去除<div>上的填充，或将宽度从50％减少到45％，并查看它的外观。

来源

2010-11-01 15:30:04 dotariel

完整样式重置将确保您避免犯XSaint提到的任何事情。边距，边界和填充会影响这一点。如果你想有填充和边框，一定要相应减少元素的宽度

div { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

：

所以你应该确保这些元素。一个文档值得参考的是盒模型，即图象是值得1000个字：

http://www.w3.org/TR/CSS2/box.html

在该图下方的说明，它指出宽度影响内容框的宽度，而不是填充，边框或边缘框。那是所有其他人的盒子。

来源

2010-11-01 15:43:53

你既可以做什么XSaint32有建议或从#left div中删除填充并将另一个div #context填充到#left div内。即

来源

2010-11-01 15:52:51 alex

Xsaint和Danny Staple给出了迄今为止最好的答案。

只需补充答案，您也可以使用名为“box-sizing”的属性以确保正确的计算。

我甚至建议将此属性添加到您的（和其他人）CSS重置中，因此Webkit，IE，Opera和Mozilla倾向于使用不同的框模型。

来源

2010-11-01 15:58:19 Dave

回答

相关问题