三栏布局，左边右边宽度固定，中间自适应

时间 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