CSS+DIV自適應佈局

時間 2019-11-15

標籤 css+div css div 自適應佈局欄目 CSS 简体版

原文原文鏈接

CSS+DIV自適應佈局

1.兩列布局（左右兩側，左側固定寬度200px;右側自適應佔滿）

代碼以下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左右兩側，左側固定寬度200px;右側自適應佔滿</title>
        <style>        
        .box{
            width:800px;
            height:300px;
            margin:0 auto;
        }
        .left{
            width:200px;
            height:300px;
            background:#f00;
            float:left;
        }
        .right{
            height:300px;
            margin-left:200px;
            background:#0f0;
        }
        </style>
    </head>
    <body>        
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>    
        </div>    
    </body>
</html>

運行結果以下圖：

兩欄佈局（左定寬，右自動）
float + margin

2.三列布局（左中右三列，左右200px固定，中間自適應佔滿）

方法一（左右浮動，中間 margin-left,margin-right，中間div在最後）

代碼以下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左中右三列，左右200px固定，中間自適應佔滿 方法一</title>
        <style>
.box{
    width:800px;
    height:300px;
    margin:0 auto;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
}
.right{
    width:200px;
    height:300px;
    float:right;
    background:#0f0;
}
.center{
    height:300px;
    background-color:#00f;
    margin:0 200px;
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </div>        
    </body>
</html>

運行結果以下圖

方法二(左中右定位)：

代碼以下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左中右三列，左右200px固定，中間自適應佔滿 方法二</title>
        <style>        
.box{
    width:1000px;
    height:300px;
    margin:0 auto;
    position:relative;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    position:absolute;
    top:0px;
    left:0px;
}
.right{
    width:200px;
    height:300px;
    background:#0f0;
    position:absolute;
    top:0px;
    right:0px;
}
.center{
    height:300px;
    background-color:#00f;
    position:absolute;
    left:200px;
    right:200px;
}
        </style>
    </head>
    <body>        
        <div class="box">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>                        
        </div>
    </body>
</html>

運行結果以下圖：

3.上中下三行，頭部，底部固定高200px，中間自適應佔滿

中間定位，底部定位

代碼以下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>上中下三行，頭部，底部固定高200px，中間自適應佔滿</title>
        <style>        
*{
    margin:0;
}
html{
    height:100%;

}
body{
    min-height:100%;
}
.header{
    width:100%;
    height:100px;
    background-color:#ccc;
}
.main{
    width:100%;
    background-color:#f00;
    position:absolute;
    top:100px;
    bottom:100px;
}
.footer{
    height:100px;
    width:100%;
    position:absolute;
    bottom:0px;
    background-color:#ccc;
}
        </style>
    </head>
    <body>
            <div class="header"></div>
            <div class="main"></div>
            <div class="footer"></div>
    </body>
</html>

運行代碼以下圖：

4.上下兩部分，地下這個股東高度200px,若是上面的內容少，那麼這個footer就固定在底部，若是內容多，就把footer往下擠

代碼以下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>上下兩部分，地下這個股東高度200px,若是上面的內容少，
        那麼這個footer就固定在底部，若是內容多，就把footer往下擠</title>
        <style>    
*{
    margin:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    background-color:#00f;
    position:relative;
}

.header{
    height:100%;
    background-color:#00f;
    padding-bottom:200px;
}
.footer{
    width:100%;
    height:200px;
    position:absolute;
    bottom:0px;
    background-color:#0ff;
}
        </style>
    </head>
    <body>
            <div class="header">    
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
            </div>
            <div class="footer"></div>    
    </body>
</html>