使用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一定要放到中间。

标签：

相关文章