三栏布局

最新推荐文章于 2025-04-23 16:13:13 发布

原创最新推荐文章于 2025-04-23 16:13:13 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

1、两边固定，中间自适应

1.1使用position:absolute和margin，这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
html,body{ margin: 0px;
           width: 100%;
           height: 100%; 
         }  
    .left{
        width: 200px;
        position: absolute;
        background-color:  blue;
        left:0; 
        height: 100%
    }
    .right{
        width: 200px;
        position: absolute;
        background-color:  blue;
        right: 0;
        height: 100%;
    }
    .center{
        margin:0 200;//由边始终空出200px;
        background:red; 
        height:100%;
        }

</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

</body>
</html>

1.2使用margin负值法。这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

 <div id = "wrap">  
            <div id = "center"></div>  
        </div>  
        <div id = "left_margin"></div>  
        <div id = "right_margin"></div>  

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}

1.3 自身浮动。自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
html,body{ margin: 0px;
           width: 100%;
           height: 100%; 
         }  
    .left
    ,.right{
        width:200px;
        height: 100%;
        background-color: blue;
    }
    .left{
        float:left;
    }
    .right{
        float: right;
    }
    .center{
        margin: 0 200;
        height: 100%;
        background-color: red;
    }

</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

</body>
</html>