                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为什么添加父级div，并将父级div设置剧中，然而并没有剧中效果

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

body{margin:0;padding: 0}

.main{witdh: 800px;margin:0 auto;}

.left{width:200px;height:300px;float:left;background:#Fcc}

.right{width:600px;height:300px;float: right;background: #CCC}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

霸道的樱木

2016-10-10

源自：如何用CSS进行网页布局 3-1

关注问题我要回答

852

操作

收起

3 回答

慕粉2035072466
2016-10-18

首先，你设置了 .left 和 .right 浮动（float），它们脱离了文档流，可以想象为悬浮在一个页面，和下面的.main 不在一个层面上。至于.main你设置了witdh: 800px;margin:0 auto;，它实际上是居中了，只是 .left 和 .right 浮动在main的上层， .left 和 .right的宽度不一样，所以你看起来不是居中而已。修改left和right的宽度为一样，看起来就居中了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:0;padding: 0;}
.main{witdh: 80px;height:300px;margin:0 auto;background:red;}
.left{width:20px;height:300px;float:left;background:#Fcc}
.right{width:60px;height:300px;float: right;background: #CCC}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>    
</div>
</body>
</html>

你可以试试删除<div class="left">left</div>和<div class="right">right</div> 看看效果，你会发现main实际是居中的。