<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:#ccc;}
.main{background-color:red;}
.left{width:200px; height:400px; background:blue;}
.right{height:400px;float:right;background:green;}
.foot{margin:0;background:orange;}
</style>
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:#ccc;}
.main{background-color:red;}
.left{width:200px; height:400px; background:blue;}
.right{height:400px;float:right;background:green;}
.foot{margin:0;background:orange;}
</style>
最赞回答 / Tesen
你右边绿色块的样式是:.right{margin-left:210px;height:500px;background:green;float:right;},翻译过来就是右边块{外边框210像素;高度500像素;背景色绿色;靠右浮动}问题就在于第一句,直接写width:600px然后固定在右边不就可以了,干嘛要用margin-left?
2015-04-07
最赞回答 / Tesen
这里是一个排版陷阱:当main里面设置了左右两个div之后,这个时候不要忘记给main也设置和左右div一样的高度,题中的main是没有设置高度的,只设置了宽度,这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面,只是我们看不到,因为它没有高度。而footer是浮在main下面的,并不是浮在左右两个div下面,所以我们看到footer块莫名其妙跑上来盖住了左右两个div,解决办法如下:第一,给main赋予和左右div同样大小的高度,这个是最直接的方法,main的高度从0变成600px之...
2015-04-03