CSS--三列布局--两边固定，中间自适应--方法/实例

在觉

 关注

阅读 105

2022-02-15


简介

        本文用示例介绍CSS三列布局的方案。

        三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第1种方案。

        两边固定，中间自适应，一共有如下几种方案：


  2. flex布局（推荐）
  3. 网格布局（grid)
  4. 浮动布局（float）
  5. 圣杯布局
  6. 双飞翼布局
  7. 表格布局（table）（不推荐）
  8. 绝对定位布局（不推荐）

想要达到的效果：

CSS--三列布局--两边固定，中间自适应--方法/实例_布局


下边所有的方案的结果都跟上图一样。 

方案1：flex(推荐)

简介

        flex是css3提供的一种新的布局方式，这种布局的产生就是为了实现自适应布局，它是随着移动互联网时代产生而引进的。

        本方案是实现自适应布局的最佳方案。

        父元素设置display: flex之后，子元素float，vertical-align，clear失效

优点


  2. 简单
  3. 维护性好

缺点

  1. 不兼容旧浏览器

示例

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .container {
            display: flex;
        }

        .aside-left {
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            flex: 1;
            background-color: #ffb91b;
        }

        .aside-right {
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案2：网格(grid)

简介

        网格布局是比较新的东西，这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代，bootstrap之类的是对栅格化布局框架非常流行，而网格布局，就是对栅格布局的标准化实现。

优点

  1. 简单、清晰

缺点

  1. 不兼容旧浏览器。（因为是新CSS标准的特性）

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 200px;
        }

        .aside-left {
            background-color: #a9ff29;
        }

        .middle {
            background-color: #ffb91b;
        }

        .aside-right {
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案3：浮动(float)

优点

  1. 兼容旧浏览器

缺点

  1. 主体内容需要放到最后，当页面元素较多时候对开发不友好。

示例

必须把中间的元素写到最后，即：左、右、中。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .aside-left {
            float: left;
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            background-color: #ffb91b;
        }

        .aside-right {
            float: right;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
    <!-- 必须放到最后 -->
    <div class="middle">中间</div>
</div>

</body>
</html>

结果



错误示例

如果按照正常的顺序写元素：左、中、右，将不会达到预期。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .aside-left {
            float: left;
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            background-color: #ffb91b;
        }

        .aside-right {
            float: right;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案4：圣杯

简介

        圣杯布局并不是因为长得像杯子，在西方，圣杯是表达“渴求之物”的意思。下面回来看它的实现：首先我们的目的是要实现中间部分先加载，所以html结构大体上是确定的。

优点


  2. 兼容旧浏览器
  3. 可以实现中间部分优先加载

缺点


  2. 处理复杂
  3. 当中间元素小于两侧元素时候会出现变形
  4. 响应能力差

第1步：给元素添加左浮动效果

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .aside-left {
            float: left;
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            float: left;
            width: 100%;
            background-color: #ffb91b;
        }

        .aside-right {
            float: left;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

结果

CSS--三列布局--两边固定，中间自适应--方法/实例_html_02


第2步：为左右元素设置负的margin值

        设置左边元素左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。设置右边元素左边距为负的自己的宽度，也就是.right {margin-left：-300px;}，

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .aside-left {
            float: left;
            width: 300px;
            margin-left: -100%;
            background-color: #a9ff29;
        }

        .middle {
            float: left;
            width: 100%;
            background-color: #ffb91b;
        }

        .aside-right {
            float: left;
            width: 200px;
            margin-left: -200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

 结果

CSS--三列布局--两边固定，中间自适应--方法/实例_ide_03


此时中间元素被压在下面，还需要进一步处理。

第3步：把左右元素放在中间元素两边

        要把左右元素放在中间元素两边，就需要让两边有边距，所以首先要给父元素加一个内边距，即添加padding: 0 200px 0 300px;。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .container {
            padding: 0 300px;
        }

        .aside-left {
            float: left;
            width: 300px;
            margin-left: -100%;
            background-color: #a9ff29;
        }

        .middle {
            float: left;
            width: 100%;
            background-color: #ffb91b;
        }

        .aside-right {
            float: left;
            width: 200px;
            margin-left: -200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

结果

CSS--三列布局--两边固定，中间自适应--方法/实例_ide_04


此时两边已经产生边距，不过两边元素还是在上中间元素面显示。

第4步：把两边的元素加相对定位，把它们定位到两边空位处

左元素添加：position: relative; left: -300px;

右元素添加：position: relative; right: -300px;

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .container {
            padding: 0 200px 0 300px;
        }

        .aside-left {
            float: left;
            width: 300px;
            margin-left: -100%;
            position: relative;
            left: -300px;
            background-color: #a9ff29;
        }

        .middle {
            float: left;
            width: 100%;
            background-color: #ffb91b;
        }

        .aside-right {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle">中间</div>
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案5：双飞翼

简介

        这种实现方案来自淘宝的UED，叫做双飞翼布局。

        双飞翼布局的html结构和圣杯布局有一点小差别，就是中间元素外面多了一层容器。

优点


  2. 兼容旧浏览器
  3. 比圣杯简单
  4. 响应比圣杯好

缺点

  1. 需要在中间元素上加容器

示例

        前两步的样式设置和和圣杯布局是相同的，元素左浮动，两侧-margin，最终产生了和上面相同的元素被遮盖的情况。

        接下来，也是双飞翼布局的特点所在，由于实际中间元素是放在一个容器里面的，我们可以给内部元素设置外边距，这样就可以让出两边的位置，两边元素也无需重定位即可完成布局。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
        }

        .aside-left {
            float: left;
            width: 300px;
            margin-left: -100%;
            background-color: #a9ff29;
        }

        .middle-container {
            float: left;
            width: 100%;
            background-color: #ffb91b;
        }

        .middle {
            margin: 0 200px 0 300px;
        }

        .aside-right {
            float: left;
            width: 200px;
            margin-left: -200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="middle-container">
        <div class="middle">中间</div>
    </div>
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案6：表格(不推荐)

简介

把三列都看做是表格，控制表格的显示情况即可。

优点


  2. 简单
  3. 兼容旧浏览器（因为表格是兼容旧浏览器的）

缺点

  1. 不灵活。（边框设置、高度设置等等都有很大受限）

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
            display: table-cell;
        }

        .container {
            display: table;
            width: 100%;
        }

        .aside-left {
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            background-color: #ffb91b;
        }

        .aside-right {
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

方案7：绝对定位(不推荐)

优点


  2. 兼容旧浏览器
  3. 简单

缺点

  1. 脱离文档流，可维护性很差

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }

        .container>div {
            height: 100px;
            position: absolute;
        }

        .aside-left {
            left: 0;
            width: 300px;
            background-color: #a9ff29;
        }

        .middle {
            left: 300px;
            right: 200px;
            background-color: #ffb91b;
        }

        .aside-right {
            right: 0;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>

</body>
</html>

​


相关推荐

CSS--三列布局--中间固定，两边自适应--方法/实例

女侠展昭 92 0 0

双飞燕布局、圣杯布局、flex布局实现三列布局（两边固定中间自适应）

其生 69 0 0

CSS两侧固定，中间自适应

mafa1993 17 0 0

上下固定中间自适应布局

黄昏孤酒 15 0 0

【CSS/HTML】CSS实现两列布局，一列固定宽度，一列宽度自适应方法

ITWYY 33 0 0

左右固定宽度中间自适应布局方式

星巢文化 187 0 0

三栏布局：左右固定，中间自适应的几种方式

北溟有渔夫 104 0 0

头部和尾部固定中间自适应的布局

爱做梦的老巫婆 88 0 0

两边横线，中间标题

逸省 93 0 0

css左侧固定右侧自适应

Java架构领域 35 0 0

精彩评论（0）

0 0 举报