网页布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/fanhaiwang520/article/details/8950960

方法一：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            min-width:600px;
        }
        .main{
            float:left;
            width:100%;
        }
        .main_body{
            margin:0 210px;
            background:#888;
            height:200px;
        }
        .left,.right{
            float:left;
            width:200px;
            height:200px;
            background:#F60;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left:-200px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="main_body">Main</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>
</html>

方法二：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            border:0;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div style="float:left;width:200px;height:200px;background:#444;">zuo</div>
    <div style="float:right;width:200px;height:200px;background:#444;">you</div>
    <div style="height:200px;margin-left:200px;margin-right:200px;background:#999;">zhong</div>
</body>
</html>

三列布局设计