三欄佈局，左邊右邊寬度固定，中間自適應

時間 2019-11-08

標籤佈局左邊右邊寬度固定中間自適應欄目 CSS 简体版

原文原文鏈接

三欄佈局，左邊右邊寬度固定，中間自適應
大體思路:左右兩列固定寬度，採用絕對定位方式position:absolute;
中間不寫定位方式，只要分別設置padding-left以及padding-right分別爲左右容器的寬度便可。css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三欄佈局，左邊右邊寬度固定，中間自適應</title>
<style type="text/css">  
body{margin:0; padding:0;}
    #left{
    border:1px solid #000000;
    background-color:#CCCCCC;
    width:200px;
    position:absolute;
    left:0;
    top:0;
    }
    #right{
    border:1px solid #000000;
    background-color:#CCCCCC;
    width:200px;
    position:absolute;
    top:0;
    right:0;
    }
    #center{
    padding-left:202px;
    padding-right:202px;
    border:1px solid #000000;
    background-color:#000;
    color:#fff;
    }

</style>   
</head>
<body>
<div id="left">左邊內容</div>
<div id="center">中間內容</div>
<div id="right">右邊內容</div>
</body>
</html>

兩欄佈局，左邊寬度固定，右邊自適應html

實現方法一：瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>兩欄佈局，左邊寬度固定，右邊自適應</title>
<style type="text/css">  
    body {  
        padding: 0;  
        margin: 0;  
    }  

    #wrapper {  
        width: 100%;  
        border: 1px solid #333;  
        margin: 0 auto;  
        <!–overflow:auto;–>
    }  

    #nav {  
        width: 200px;  
        float: left;  
    }  

    #content-wrapper {  
        margin-left: -200px;  
        float:right;  
        width: 100%;  
    }  

    #content {  
        margin-left: 200px;  
        padding: 0 10px;  
    }  

    .clearfix:after {  
        height: 0;  
        content: ".";  
        display: block;  
        clear: both;  
        visibility: hidden;  
    }  
</style>   
</head>
<body>
<div id="wrapper" class="clearfix">  
    <div id="nav">  
        <p>菜單1</p>  
        <p>菜單2</p>  
        <p>菜單3</p>  
        <p>菜單4</p>  
    </div>
    <div id="content-wrapper">  
        <div id="content">  
            <p>

中新網1月12日電(記者賈靖峯)中國銀監會有關負責人12日表示，將在風險可控、商業可持續前提下支持保障性住房建設，他並透露，2010年11月末經濟適用房開發貸款同比勁增逾三成，經濟適用房我的購房貸款則年勁增逾四成，但保障性住房貸款仍存在「風險緩釋不足、還款保障難以落實」等問題。app

</p>  

        </div>  
    </div>  

</div>  

</body>
</html>

總結方法一：2個div，左側div寬度固定，右側自適應瀏覽器，辦法是：對左側div浮動float：left，而且固定寬度；對於右側div樣式float：right，寫一個margin-left：-x；width：100%；而後對右側div的第一個子內容div寫一個margin-left：x；佈局

方法二：若是沒有對第一個進行浮動，那麼能夠進行定位postion：absolute；對於第二個div只須要寫margin-left：x 便可了。post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。