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

文章目录

  • 方法1:使用flex
  • 方法2:使用float + margin
  • 方法3:使用float + BFC
  • 方法4:圣杯布局和双飞翼布局
  • 方法5:绝对定位

方法1:使用flex

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <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>Documenttitle>
    <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>Documenttitle>
    <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>Documenttitle>
    <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,前端,三栏布局,flex,float)