html和css中元素的更好解决方案答案

【问题标题】：Better solution of elements in html and csshtml和css中元素的更好解决方案
【发布时间】：2014-03-31 10:47:02
【问题描述】：

我有一些css中html元素位置的问题我有两个例子，但是有人能告诉我什么是正确的解决方案吗？？

HTML

<div class="wrapper">
<div class="left-col"></div>
<div class="right-col"></div>
</div>

解决方案 1 CSS

.wrapper{
width:100%;
}
.left-col{
width:50%;
float:left;
}
.right-col{
width:50%;
float:right;
}

解决方案 2 CSS

.wrapper{
width:100%;
}
.left-col{
width:50%;
float:left;
margin-right:-50%;
}
.right-col{
width:50%;
float:right;
margin-left:-50%;
}

有人使用了一些 - 边距，是负边距正确的解决方案吗？

【问题讨论】：

.wrapper{clear:both} 是一种错误的清除方式（参见jsfiddle.net/vcq2N）。必须清除浮动元素之后的元素（不是容器），或者在容器中添加overflow: hidden（或不同于visible）。
忘了clear，我只是举个简单的例子，我没有问clear，我问的是-margin
就我的经验而言，当您的页面为ltr 时，margin-right 有问题，除了您解释所有边距意味着右、左、上和下...所以，只需使用 @ 987654329@ 两个元素...
为什么还要使用 - 边距？

标签： html css margin

【解决方案1】：

我认为解决方案 1 更好更简单。作为 Oriol 的例子。包装器后的div 与包装器 重叠。你也可以使用table。

【讨论】：

【解决方案2】：

CSS 负边距可以一直追溯到 CSS 1.0，甚至受支持（尽管效果不佳）但 IE 4.0。我在一些事情上使用负边距，最值得注意的是完美像素表单字段。我的网站有一个登录表单，无论页面/屏幕的宽度如何（例如 800x600 或 1920x1200），所有表单字段之间总会有一个像素，并且在您主动调整窗口大小时它会保持这种状态。使用padding 也有帮助，但请记住，您希望谨慎使用填充，使用margin 几乎总是要走的路。如果您认为您需要在元素上进行填充，只需给子元素/子元素margin，这样布局问题就会少很多。一般来说，您希望避免使用position，因为它在大多数情况下不适合使用。

我建议查看我的 CSS float and margin tutorial 从基础开始，然后在 Firefox 中使用 Firebug 使用 DOM 检查器对 DOM 进行实时更改例如，在我的网站上，您可以看到更改各种 CSS 属性是如何改变事物的。

【讨论】：

@Oriol 如果您真的阅读了我写的内容，我特别说过“您想谨慎使用填充”。