使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

时间:2022-11-02 20:43:47

所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。

1. 基于传统的position和margin等属性进行布局

   这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法。

  1).绝对定位法

          绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }
       #left {
            width: 100px;
            height: 200px;
            background-color: red;
            position: absolute;
            top:120px;
            left: 0;
       }
       #right {
            width: 100px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:120px;
            right: 0;
       }
       #middle {
            height: 200px;
        margin: 2px 200px;
        background-color: saddlebrown;
       }
    </style>
</head>
<body>
    <div id="content">
        <div id="left">左侧</div>
        <div id="middle">中间</div>
        <div id="right">右侧</div>
    </div>
</body>
</html>

 2).使用自身浮动法

    自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }
       #left {
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
       }
       #right {
            width: 100px;
            height: 200px;
            background-color: green;
            float: right;
       }
       #middle {
            height: 200px;
        margin: 2px 200px;
        background-color: saddlebrown;
       }
    </style>
</head>
<body>
    <div id="content">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
        <div id="middle">中间</div>
    </div>
</body>
</html>

该布局法的好处是受外界影响小,但是不足是 三个元素的顺序,center一定要放在最后,这是和绝对定位不一样的地方,center占据文档流位置,所以一定要放在最后,左右两个元素位置没有关系。当浏览器窗口很小的时候,右边元素会被击倒下一行。

2 , css3新特性

   在外围包裹一层div,设置为display:flex;中间设置flex:1;但是盒模型默认紧紧挨着,可以使用margin控制外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }
       #wrap {
           width: 100%;
           height: 100%;
           display: flex;
           margin: 10px;
       }
       
       #left {
            width: 100px;
            height: 200px;
            background-color: red;
            margin: 10px;
       }
       #right {
            width: 100px;
            height: 200px;
            background-color: green;  
            margin: 10px;           
       }
       #middle {
           flex: 1;
            height: 200px;
        margin: 10px;
        background-color: saddlebrown;
       }
    </style>
</head>
<body>
    <div id="wrap">    
        <div id="left"></div>
        <div id="middle"></div>
        <div id="right"></div>
    </div>
</body>
</html>

注意: center一定要放到中间。