我在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%;
}
有人使用的一些利润是零利润率解决方案吗?
答案 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属性如何更改内容。