几种方法实现三栏布局

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

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>

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页