【HTML&CSS】混合布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>混合布局</title>
    <style type="text/css"> body{margin: 0; padding: 0;} .top{height: 100px;background: blue;} .main{width: 800px;height: 600px;background: #ccc;margin: 0 auto;} .left{width:200px;height: 600px;background: yellow;float: left;} .right{width: 600px;height: 600px;background:black;float: right;} .foot{width: 800px;height: 100px;background: #900;margin: 0 auto;} <!--margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思--> </style>
</head>
<body>
    <div class="top"></div>
    <div class="main">
        <div class="right"></div>
        <div class="left"></div>
    </div>  
    <div class="foot"></div>
</body>
</html>

补充 : 如果想要 margin 0 auto ;居中的话

必须要设置高度才可以 第二个就考虑一下DOCTYPE

你可能感兴趣的:(【HTML&CSS】混合布局)