自适应多列布局

最新推荐文章于 2022-12-22 18:15:00 发布

画一生情入颜容

最新推荐文章于 2022-12-22 18:15:00 发布

阅读量687

点赞数

文章标签：自适应多列布局 BFC

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/78105362

版权

多列布局自适应是一个经常被问到的问题，所以今天仔细看了一下，首先是BFC实现多列布局是一个经典的例子。
什么是BFC？
BFC称为块级格式上下文，它是由于块级元素设置了某些属性而形成的一个独立的区域。在这个区域中，它里面的布局不会影响到外面元素的布局，反之也一样。
可以触发BFC的属性：
1、 float属性不为none

2、 position为absolute或fixed

3、 overflow的值不为visible

4、 display的值为table-cell，table-caption，inline-block中的任何一个。

一、实现自适应的两列布局：
首先来使用最基础的方法实现两列布局，左边固定宽度，右面自适应。
①。div+float+margin

<div class= "left"></div>
<div class = "right"></div>
<style>
    .left{
        width:180px;
        height:100px;
        float:left;
        background-color:red;
}
   .right{
      margin-left:180px;
      background-color:blue;
      height:100px;
 }
</style>

这里写图片描述
右边蓝色的是自适应的，但这样做的缺点就是，margin-left的值每次都要设置和左边一样的宽度。
② 使用BFC的特性：BFC的区域不会与外部浮动元素重叠。那么我们就可以使浮动元素的右边为BFC区域就可以，使用overflow:hidden来实现BFC。
只需将right中改为如下：

 .right{
      overflow: hidden;
      background-color:blue;
      height:100px;
 }

可以实现与方法一同样的效果。
除此之外还可以设置display:table-cell;width:9999px;

③。使用table+css实现
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.left{
width: 100px;
background-color:red;
}

.right{

background-color:green;
}
.content{
width: 100%;
height: 100px;
border: 0px;
border-collapse: collapse;
}

那么左侧自适应右侧定宽该怎样实现？

首先使两个元素向左浮动，这时候处于同一行，如果左侧不设置宽度的话，那么是不能显示的，如果设置宽度该设置多少呢？先设成100%；那么右边的元素就会被挤到下一行浮动，再左侧加上margin-right:右侧元素的宽度，这样就可以实现了。
.left{
float: left;
height: 100px;
background-color: red;
width: 100%;
margin-right: -200px;
}
.right{
float: left;
height: 100px;
width: 200px;
background-color: blue;

现两边宽度固定中间自适应的三列布局：
①。div + float + margin-left + margin-right
从上面实现两列布局的第一种方法，我们使用div + float + margin-left实现右侧宽度自适应，当要实现中间自适应时，可以给中间的元素加上margin-right。
这里写图片描述
代码如下

    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .left{
        width:180px;
        height:100px;
        float:left;
        background-color:red;
   }
   .right{
        width:180px;
        height:100px;
        float:right;
        background-color:green;
   }
   .center{
     /* display: table-cell;
      width: 9999px;*/
      margin-left: 180px;
      margin-right: 180px;
      background-color:blue;
      height:100px;
 }
</style>

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

</body>

其中注意上面的center必须在最后面。因为float脱离文档流，如果div有是块级元素。如果顺序为

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

会出现这种情况![这里写图片描述](https://img-blog.csdn.net/20170926163633496?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3Nkbl96c2Rm/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 原因是左侧脱离文档流，中间的就当做红色的不占据位置，一次紧跟其后，之后蓝色的为块级元素，会独占一行，所以蓝色的就会在下一行中右浮动。就会出现这种情况。如果采用上面正确的顺序，红色的先左浮动，绿色右浮动时当做左侧的不存在，加入蓝色时，它也相当于不知道其他两个的存在，所以可以正确的出现在一行。形成自适应布局。接下来使用两列布局同样的原理使用BFC进行三列自适应布局。

.center{
     /* display: table-cell;
      width: 9999px;*/
      overflow: hidden;
      background-color:blue;
      height:100px;
 }

只需修改center中 display: table-cell; width: 9999px;和 overflow: hidden;二选一都会触发BFC，从而形成两边宽度固定，中间自适应的三列布局。 ③。table+css实现 *{ margin: 0px; padding: 0px; } html,body{ width: 100%; height: 100%; } .left{ width: 100px; background-color:red; } .center{ background-color:blue; } .right{ width: 100px; background-color:green; } .content{ width: 100%; height: 100px; border: 0px; border-collapse: collapse; }

三、两列宽度自适应，中间宽度固定。

    *{
        margin: 0px;
        padding: 0px;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .left{
        width:50%;
        margin-left: -100px;
        height:100px;
        float:left;
        background-color:red;
   }
      .center{
        width: 200px;
        float: left;
        background-color:blue;
       height:100px;

 }
   .right{
        width:50%;
        height:100px;
        margin-left: -100px;
        float:left;
        background-color:green;
   }

使用table+css

.left{

        background-color:red;
   }
      .center{

        width: 100px;
        background-color:blue;

 }
   .right{

        background-color:green;
   }