在html和css中更好地解决元素问题

时间:2014-03-30 22:38:49

标签: html css margin

我在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%;
}

有人使用的一些利润是零利润率解决方案吗?

2 个答案:

答案 0 :(得分:1)

我认为解决方案1更好,更简单。作为Oriol的榜样。包装器后面的div包装器重叠。您也可以使用table

答案 1 :(得分:0)

CSS负边距一直回到CSS 1.0,甚至支持(如果虽然很差)但IE 4.0。我对一些东西使用负边距,最明显的是完美像素形式字段。我的网站有一个登录表单,无论页面/屏幕的宽度如何(例如800x600或1920x1200),所有表单字段之间总会有一个像素,当您主动调整窗口大小时,它仍然保持这种状态。使用padding也可以帮助你,但请记住,你要谨慎使用填充,使用margin几乎总是可行的。如果你想想你需要在元素上填充,只需给出子元素/子元素margin,你就会有更少的布局问题。通常,您希望避免使用position,因为它在大多数情况下都不适合使用。

我建议您查看我的 CSS float and margin tutorial 以开始使用基础知识,然后在Firefox中使用 Firebug 来使用DOM检查器进行实时操作例如,更改我网站上的DOM,以便您可以看到更改各种CSS属性如何更改内容。