首页 新闻 搜索 专区 学院

这个两栏布局的CSS有点不明白的地方,求解释!

0
悬赏园豆:50 [已解决问题] 解决于 2013-07-20 16:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>博客园</title>
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/NNUF/wlwmanifest.xml"/>
</head>
<body>
<style>
.main{float:right;width:100%;margin-left:-220px;}
.content{margin-left:220px;}
.side{float:left;width:200px;}
</style>
<div style="overflow:hidden; clear:both">
    <div class="main" style="background:#ccc">
        <div class="content">主栏内容在前面内容区内容区内容区内容区内容区内容区</div>
    </div>
    <div class="side" style="background:#666">容区内容区内容区内容区内容区内容区内</div>
</div>
</body>
</html>

.main的margin-left负值起到什么样的作用?这里有点不明白,width100%不就占满了整个宽度了么,为什么side还是会到左边?

VVG的主页 VVG | 初学一级 | 园豆:154
提问于:2013-07-20 16:11
< >
分享
最佳答案
0

width100% 是占满100%没错;

由于.main和.side都是float的,下面才能成立

margin-left负值,可以这么理解:

main和side之间的距离有多远,正值,两个之间肯定有隔阂,负值,两个之间可以融在一起(side已经盖在main的上面了)

收获园豆:50
Yu | 专家六级 |园豆:12950 | 2013-07-20 16:21

负值相当于把左边的拉扯到自己这边来,大致明白了!谢谢

VVG | 园豆:154 (初学一级) | 2013-07-20 16:50
其他回答(1)
0

margin-left:10px 表示向右移动10像素,

margin-left:-10px 表示向左移动10像素,

geass.. | 园豆:1777 (小虾三级) | 2013-07-20 16:27
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册