1. 程式人生 > >div css 聖盃佈局與雙飛翼佈局

div css 聖盃佈局與雙飛翼佈局

div css 聖盃佈局

<html>
<head>
    <style>
        body{
            min-width:600px;
            }
        .main{
                height:500px;
                padding:0 200px 0 200px;
            }
        .midle {
        width:100%;
        height:500px;
        background-color:red;
        }
.left{ width:200px; height:500px; background-color:pink; margin-left:-100%; position:relative; left:-200px; } .right{ width:200px; height:500px; background-color:black; margin-left
:-200px
; position:relative; right:-200px; }
.fl{ float:left; }
</style> </head> <body> <div class="main"> <div class="midle fl">內容內容內容內容內容內容</div> <div class="left fl"></div> <div
class="right fl">
</div> </div> </body> </html>

div css 雙飛翼佈局

<html>
<head>
    <style>
        body{
            min-width:600px;
            }
        .main{
                height:500px;
            }
        .midle {
        width:100%;
        height:500px;
        background-color:red;
        }
        .left{
            width:200px;
            height:500px;
            background-color:pink;
            margin-left:-100%;
            }

        .right{
        width:200px;
        height:500px;
        background-color:black;
        margin-left:-200px;
        }
        .fl{
            float:left;
            }
        .inner{
            margin:0 200px;
            }
    </style>
</head> 


<body>
    <div class="main">
        <div class="midle fl">
            <div class="inner"> 
                內容內容內容內容內容內容
            </div>          
        </div>
        <div class="left fl"></div>     
        <div class="right fl"></div>

    </div>
</body> 
</html>

這裡寫圖片描述