几种方法实现三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

the弄潮儿_

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量302

点赞数 4

文章标签： css html

本文链接：https://blog.csdn.net/m0_52247852/article/details/110732503

版权

实现左右两栏固定，中间自适应的三栏布局

1.利用浮动的方法

<style>
  .left, .right {
    width: 200px;
    height: 300px;
  }

  .left {
    float: left;
    background-color: aquamarine;
  }

  .right {
    float: right;
    background-color: lightcoral;
  }

  .center {
    height: 300px;
    margin-left: 200px;
    margin-right: 200px;
    background-color: lightcyan;
  }
</style>
<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>

该种方法主要是使左右两栏浮动，调整中间一栏的左右margin来达到效果
在这里插入图片描述

2.利用定位的方法

<style>
    .wrapper{
      position: relative;
      width: 100%;

    }
    
    .left,.right{
      height: 300px;
      width: 200px;
    }

    .left{
      position: absolute;
      background: aqua;
      left: 0;
      top: 0;
    }

    .right{
      position: absolute;
      background: chocolate;
      right: 0;
      top: 0;
    }

    .center{
      background: cornflowerblue;
      height: 300px;
      margin-left: 200px;
      margin-right: 200px;

    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>

该种方法是将父元素设置为相对定位，左右两栏设置为绝对定位，调节中间一栏的左右margin来实现。
在这里插入图片描述

3.圣杯布局

<style>
     * {
      margin: 0;
      padding: 0;
    }

    body{
      min-width: 700px;
    }

    .clearfix::after{
      content: '';
      display: block;
      clear: both;
    }

    .wrapper{
     padding-left: 200px;
     padding-right: 300px;
    }

    .center, .left, .right {
      float: left;
      height: 200px;
    }

    .center{
      width: 100%;
      background: darkseagreen;
    }

    .left{
      position: relative;
      left: -200px;
      width: 200px;
      margin-left: -100%;
      background: cornflowerblue;
    }

    .right{
      width: 300px;
      margin-right: -300px;
      background: darksalmon;
    }
  </style>
</head>
<body>
  <body>
    <div class="wrapper clearfix">
      <div class="center">center</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</body>

接下来我会分步骤介绍圣杯布局的实现
1）创建三个div，为了使中间一栏优先显示，应先把中间的一栏写在前面，并为其三栏设置浮动

<style>
     * {
      margin: 0;
      padding: 0;
    }

    .center, .left, .right {
      float: left;
      height: 200px;
    }

    .center{
      width: 100%;
      background: darkseagreen;
    }

    .left{
      width: 200px;
      background: cornflowerblue;
    }

    .right{
      width: 300px;
      background: darksalmon;
    }
  </style>
</head>
<body>
  <body>
    <div class="wrapper">
      <div class="center">center</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</body>

实现效果为：
在这里插入图片描述

2)但是这时候又出现了一个问题，父元素的高度坍塌了，因此需要先解决高度坍塌的问题。

3)接下来就要考虑左右两栏的安放问题，使左栏放在最左边，右栏放在最右边，因此我调整父元素盒子的左右padding在为左右两栏腾出空间

 .wrapper{
      margin-left: 200px;
      margin-right: 300px;
    }

效果如下：
在这里插入图片描述
4)接下来就可以放置左右两栏了,为左栏加 margin-left: -100%;
为右栏加 margin-right: -300px;

这时候的效果为：
在这里插入图片描述
可以看到左边栏覆盖了中间栏的一部分
5）为左边栏这种相对定位，向左移动

 .left{
      position: relative;
      left: -200px;
      width: 200px;
      margin-left: -100%;
      background: cornflowerblue;
    }

效果图为：
在这里插入图片描述
好了，这样圣杯布局又完成了。但是我发现如果页面缩放的足够小的话，整个布局会被打乱，因此可以为其设置一个最小宽度。
页面的最小宽度
页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+300=500px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+300+200=700px;

在写这段代码的过程中我一直在纠结 margin-left: -100%; 这里设置的目的，后来了解到：
magin-left:-100%
这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。

最后，还有一个问题是

width:100%

我在查资料的过程中，发现了它的重要性：

这是中间栏能够做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素(container)的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，而达不到这样的效果

链接：https://www.jianshu.com/p/81ef7e7094e8

以上就是我整个过程的总结。

4.双飞翼布局

双飞翼布局和圣杯布局区别并不大，区别在于我们给center所在盒子设置了父元素盒子，通过调整它的左右margin来达到效果。这里不再详细说明。

 <style>
    .wrapper{
      width: 100%;
    }

    .center-wrapper,
    .left,
    .right {
      float: left;
    }

    .center-wrapper {
      width: 100%;
    }

    .center {
      height: 300px;
      background: lime;
      margin-left: 200px;
      margin-right: 300px;
    }

    .left {
      width: 200px;
      height: 300px;
      background: lightblue;
      margin-left: -100%;
    }

    .right {
      width: 300px;
      height: 300px;
      background: lightpink;
      margin-left: -300px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="center-wrapper">
      <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

在这里插入图片描述

the弄潮儿_

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
几种方法实现三栏布局

实现左右两栏固定，中间自适应的三栏布局1.利用浮动的方法<style> .left, .right { width: 200px; height: 300px; } .left { float: left; background-color: aquamarine; } .right { float: right; background-color: lightcoral; } .center { he
复制链接

扫一扫