CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法

Posted webchang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法相关的知识,希望对你有一定的参考价值。

文章目录

方法1:使用flex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .con 
        display: flex;
      
      .left 
        background-color: red;
        width: 200px;
        height: 50px;
      
      .middle 
        background-color: green;
        height: 50px;
        flex: 1;
      
      .right 
        background-color: blue;
        width: 200px;
        height: 50px;
      
    </style>
  </head>
  <body>
    <div class="con">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

方法2:使用float + margin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .left 
        background-color: red;
        width: 200px;
        height: 50px;
        float: left;
      
      .middle 
        background-color: green;
        height: 50px;
        margin: 0 200px;
      
      .right 
        background-color: blue;
        width: 200px;
        height: 50px;
        float: right;
      
    </style>
  </head>
  <body>
    <div class="con">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 注意这里,中间的内容要放在下边 -->
      <div class="middle"></div>
    </div>
  </body>
</html>

或者也可以对left和right的div进行绝对定位

方法3:使用float + BFC

BFC的用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .left 
        background-color: red;
        width: 200px;
        height: 50px;
        float: left;
      
      .middle 
        background-color: green;
        height: 50px;
        /* 这一行做了变化 */
        overflow: hidden;
      
      .right 
        background-color: blue;
        width: 200px;
        height: 50px;
        float: right;
      
    </style>
  </head>
  <body>
    <div class="con">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 中间的内容要放在下边 -->
      <div class="middle"></div>
    </div>
  </body>
</html>

方法4:圣杯布局和双飞翼布局

https://blog.csdn.net/weixin_43974265/article/details/115427185

方法5:绝对定位

全部使用绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .con 
        position: relative;
      
      .left 
        background-color: red;
        width: 200px;
        height: 50px;
        position: absolute;
        left: 0;
      
      .middle 
        background-color: green;
        height: 50px;
        position: absolute;
        left: 200px;
        right: 200px;
      
      .right 
        background-color: blue;
        width: 200px;
        height: 50px;
        position: absolute;
        right: 0;
      
    </style>
  </head>
  <body>
    <div class="con">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

前端学习交流QQ群 862748629,群内学习讨论的氛围很好,大佬云集。点我加入

以上是关于CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法的主要内容,如果未能解决你的问题,请参考以下文章

CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法

《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

圣杯布局和双飞翼布局

经典三栏布局之圣杯双飞翼弹性布局

三栏结构布局技巧,顶了