搞定三栏布局的七种方法

最新推荐文章于 2023-08-30 16:07:08 发布

L.-web

最新推荐文章于 2023-08-30 16:07:08 发布

阅读量201

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45601248/article/details/120378082

版权

1.float布局

左边元素设置左浮动，中间元素左浮动，右边元素右浮动，

中间元素的宽度设置：100% - 左右元素宽度之和

<body>
  <div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

  <style>
    .box{
      width: 100%;
    }
   .left{
     float: left;
     width: 100px;
     background-color: coral;
   }
   .right{
     float: right;
     width: 100px;
     background-color: cornflowerblue;
   }
   .center{
     float: left;
     width: calc(100% - 200px);   //注意空格
     background-color: rebeccapurple;
   }
  </style>

2.position布局

父元素开启相对定位，三个子元素开启绝对定位

左元素固定宽度，left为0

右元素固定宽度，right为0

中间元素left为左元素宽度，right右左元素宽度

<body>
  <div class="box">
    <div class="left inner">left</div>
    <div class="center inner">center</div>
    <div class="right inner">right</div>
  </div>
</body>
  <style>
    .box{
      position: relative;
    }
    .inner{
      position: absolute;
    }
   .left{
     left: 0;
     width: 100px;
     background-color: coral;
   }
   .right{
     right: 0;
     background-color: cornflowerblue;
     width: 100px;
   }
   .center{
     left: 100px;  //左元素距离
     right: 100px; //右元素距离
     background-color: rebeccapurple;
   }
  </style>

3.flex布局

左右固定宽度，中间元素flex为1

<body>
  <div class="box">
    <div class="left inner">left</div>
    <div class="center inner">center</div>
    <div class="right inner">right</div>
  </div>
</body>
  <style>
    .box{
      display: flex;
    }
    .inner{
      width: 300px;
      height: 300px;
      background-color: rebeccapurple;
    }
   .center{
    flex: 1;
    background-color: red;
   }
  </style>

4.table布局

父元素设置display为table

左右元素定宽，中间元素display为table-cell，宽度为100%

<body>
  <div class="box">
    <div class="left inner">left</div>
    <div class="center inner">center</div>
    <div class="right inner">right</div>
  </div>
</body>
  <style>
    .box{
      display: table;
    }
    .inner{
      width: 100px;
      height:100px;
      background-color: rebeccapurple;
    }
   .center{
    display: table-cell;
    width: 100%;
    background-color: red;
   }
  </style>

5.grid布局

<body>
  <div class="box">
    <div class="left inner">left</div>
    <div class="center inner">center</div>
    <div class="right inner">right</div>
  </div>
</body>
  <style>
    .box{
      display: grid;
      width: 100%;
      grid-template-rows: 100;
      grid-template-columns: 100px auto 100px;
    }
    .inner{
      background-color: rebeccapurple;
    }
   .center{
    background-color: red;
   }

6.圣杯布局

为了主区域优先加载，主区域标签要放在前面

1.设置左中右三个元素浮动float：left使得他们在一行

2.设置容器包裹三个元素，清除浮动，避免塌陷

3.为左元素设置margin-left:-100%,父元素设置padding-left为左元素的宽度，使得左元素在左边

4.设置右元素的margin-left为负自身的宽度，使得右元素在右边

5.为了左右元素不占据中间元素的区域，分别给左右元素设置相对定位，进行左右对齐

<body>
  <div class="box clearFix">
    <div class="center inner">center</div>
    <div class="left inner">left</div>
    <div class="right inner">right</div>
  </div>
</body>
  <style>
    .box{
      padding-left: 100px;
      padding-right: 100px;
    }
    .clearFix::after{
      content: "";
      display: block;
      clear: both;
    }
    .inner{
      float: left;
      background-color: rebeccapurple;
    }
   .center{
    width: 100%;
    background-color: red;
   }
   .left{
     width: 100px;
     margin-left: -100%;
     position: relative;
     left: -100px;
   }
   .right{
     width: 100px;
     margin-left: -100px;
     position: relative;
     right: -100px;
   }
  </style>

7.双飞翼布局

为了解决圣杯布局自适应元素小于定宽元素时布局会错乱的问题，要用到圣杯布局

双飞翼布局和圣杯布局思路相似

双飞翼布局和圣杯布局不同之处在于：

①在处理左右元素不占据中间元素的区域的方法不一样，没有用相对定位，左中右区域没有包裹元素，只有中间区域有包裹元素，中间元素不设置浮动，包裹元素设置浮动

<body>
  <div class="wrap">
    <div class="center inner">center</div>
  </div>
    <div class="left inner">left</div>
    <div class="right inner">right</div>
</body>
  <style>
    .wrap{
      float: left;
      width: 100%;
    }
    .clearFix::after{
      content: "";
      display: block;
      clear: both;
    }
    .left , .right{
      float: left;
      background-color: rebeccapurple;
    }
   .center{
    margin-left: 100px;
    background-color: red;
   }
   .left{
     width: 100px;
     margin-left: -100%;
   }
   .right{
     width: 100px;
     margin-left: -100px;
   }

L.-web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搞定三栏布局的七种方法

1.float布局左边元素设置左浮动，中间元素左浮动，右边元素右浮动，中间元素的宽度设置：100% - 左右元素宽度之和<body> <div class="box"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </di
复制链接

扫一扫