三列布局設計

方法一:

<!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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章