首页 >> 全栈工程 >>CSS >> 谈谈css多栏自适应布局
详细内容

谈谈css多栏自适应布局

时间:2020-11-12        阅读

本篇文章给大家介绍一下css多栏自适应布局。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。


首先,在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。

1、固定布局

说到固定布局想必大家已经觉得无爱了,但我还是要简单地讲一下,下面通过一个简单的实例进行讲解:

html代码:

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

css代码:

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:400px;
  background:#ccc;
}
.right{
   width:300px;
   height:400px;
   background:#ddd;
}

我们希望的布局效果是500px宽的容器内分别有一个200px宽和300px宽的子元素容器,可此时运行结果为:

1.png

这是因为div元素是块级元素,默认是会占据整行的,于是我们就采用浮动的方法来解决这个问题。

此时我们只需要再添加如下样式:

.left,.right{
  float:left;
}

那么就能得到我们想要的结果了:

2.png

由于这里只有两栏布局,而且都是固定布局,并且刚好占满父容器,所以第二个子元素右浮动也是一样的效果。但如果是多栏布局(比如四栏布局)并且刚好占满父容器的话,那么最后一个可以是左浮动或者右浮动。

对于两栏固定布局,其实并不一定两个子元素都需要左浮动,可以第一个子元素左浮动,第二个设置margin-left值撑开就行了:

.left{
  float:left;
}
.right{
  margin-left:200px;
}

这样也能实现上面的效果。但如果是多栏固定布局,个人觉得还是浮动比较方便。

在固定布局中,除了浮动之外,还有一种比较常用的方法就是定位。

把上面的样式代码改一改:

.wrap{
  position:relative;
}
.left{
  position:absolute;
  top:0;
  left:0;
}
.right{
   position:absolute;
   top:0;
   left:200px;
}

这样写同样能达到之前的那种效果,但定位布局比较烦的就是得精确计算每一块的位置。

所以,个人觉得目前固定布局一般会结合浮动+定位+必要时的内外边距来进行布局会更加实用。当然了,浮动+定位+内外边距也同样适用于自适应布局,彼此之间都不是等号关系的。

2、两栏自适应布局

同样是上面的实例,我把它改成自适应布局:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:40%;
  height:100%;
  float:left;
  background:#ccc;
}
.right{
   width:60%;
   height:100%;
   float:left;
   background:#ddd;
}

此时运行看一下结果:

3.png

因为现在已经改成流式布局了,所以容器的宽度会随着浏览器的宽度而按比例缩放。当然,需要配合浮动或者定位。

但是CSS3提供了一种更好的弹性伸缩布局flexbox,看看怎么实现:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  flex:2;
  background:#ccc;
}
.right{
   flex:3;
   background:#ddd;
}

是不是更简单。所以说,不管多少栏布局(实际开发中也不会很多栏的),通过流式布局或者flexbox弹性伸缩布局基本能解决。但目前来说,弹性布局兼容性还不是很好,所以用得比较多的还是移动端布局,但总体上更多的还是使用流式布局,必要时可以配合媒体查询。

既有固定布局也有自适应布局

还是上面的实例,现在两栏布局第一个子元素固定宽度,而第二个子元素自适应剩余的宽度,该怎么做?

第一种方法就是给第二个子元素加左外边距,挤出来:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
}
.right{
   height:100%;
   margin-left:200px;
   background:#ddd;
}

结果就是这样的:

4.png

第二种方法就是绝对定位+外边距:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  position:relative;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
  position: absolute;
  top:0;
  left:0;
}
.right{
   height:100%;
   background:#ddd;
   margin-left:200px;
}

但其实第一种方法和第二种方法原理是一样的,换汤不换药罢了。

第三种方法,利用BFC特性:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
  float:left;
}
.right{
   height:100%;
   background:#ddd;
   overflow: hidden;
}

这里给第二个子元素设置了overflow:hidden之后呢,它就生成了一个BFC块,BFC其中的一个布局规则就是不会和float box 发生重叠,于是就和第一个浮动了的子元素隔开了,我说得比较苍白,大家可以去多了解BFC的一些布局特性,包括如何生成一个新的BFC块。那为了方便,我这里就把BFC的一些相关知识点直接放上来给大家了解一下:

BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  • BFC的区域不会与float box重叠。

  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  • 计算BFC的高度时,浮动元素也参与计算

哪些元素会生成BFC:

  • 根元素

  • float属性不为none

  • position为absolute或fixed

  • display为inline-block, table-cell, table-caption, flex, inline-flex

  • overflow不为visible

OK,还有一种方法就是flex布局:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  background:#ccc;
}
.right{
   height:100%;
   background:#ddd;
   flex:1;
}

是不是也挺方便的?现在我提升一下难度,现在是三栏布局,左右栏固定宽度,中间自适应,该怎么做?

这时候flex布局就是最佳的选择了:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
}
.center{
    height:100%;
    background:#666;
    flex:1;
}

这种本来就很苦恼的布局,对于flex布局来说都能轻松解决意外烦恼。

且慢,如果我想让中间的子元素优先渲染呢?

<div class="wrap">
   <div class="center">中间自适应栏</div>
   <div class="left">左边固定栏</div>
   <div class="right">右边固定栏</div>
</div>

这时的情况是这样的:

5.png

这时候吧,还是得利用flex来解决这个问题:

.wrap{
  width:80%;
  height:400px;
  border:1px solid red;
  margin:0 auto;
  display:flex;
}
.left{
  width:200px;
  height:300px;
  float:left;
  background:#ccc;
  order:1;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
   order:3;
}
.center{
    height:100%;
    background:#666;
    flex:1;
    order:2;
}

这时候出来的效果就是我们想要的:

6.png

好的,关于多栏自适应布局我就讲到这里,其他方面的知识扩展与应用,就留给大家去研究了。

本文转载自:https://www.cnblogs.com/jr1993/p/4788718.html

更多web前端开发知识,请查阅ots网络安全门户 !!!


最新评论
请先登录才能进行回复登录
.
更多

1589982338979126.png


ots网络社区

www.ots-sec.cn

联系方式
更多

投稿邮箱:1481840992@qq.com

交流群2群:622534175

ots网络社区3群:1078548359

关注我们
更多
技术支持: 建站ABC | 管理登录