css实现左右顶头、宽度自适应的多列、多块并排，多列布局

anyway 发布于2019-08-01 14:56 / 1046人阅读

摘要：今天在工作中遇到了一个问题有三个块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序，还有就是间距是不固定的，并且加了，可能会有副作用。

今天在工作中遇到了一个问题：有三个div块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。
我第一时间想到的是传统的三列布局，但传统的三列布局都是固定宽度加自适应宽度，从网上搜了好久都没有搜到结果。所以自己想办法。

第一种想到的办法：

第一种我准备用两边float，中间margin居中的方法。代码如下：
css:

    .wrap{height:300px;width:95%;margin: 100px auto;}
    .left{float:left;width:32%;height:100px;background-color: #235255}
    .right{float:right;width:32%;height:100px;background-color: #374737}
    .middle{width:32%;margin:0 auto;height:100px;background-color: #563958}

html:

结果变成了这样：

查了一下，解决办法是把right提到最前面。试了一下，成功了。

 html:

不过思考一下，这个问题有很多的不方便。首先就是可能会打乱html的加载顺序，还有就是间距是不固定的，并且加了float，可能会有副作用。
之后我就考虑第二种方案。问了下同事，提到了可以用inline-block代替float的方法。这给了我很大的启发。回来我就试了一下。

第二种想到的办法

这种方法将这三个块都设置成display:inline-block，利用inline元素的特性将其居于一行，再将其box-sizing属性设置成border-box。
这种方法，好处有几点：
1.不会有float的副作用存在
2.不管是三列还是三十列，来就行
代码如下：
css：

    .g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
    .in-bl{display: inline-block;}
    .f{width: 33.333%;height: 100px;background-color: #ab1256;}
    .s{width: 33.333%;height: 100px;}
    .t{width: 33.333%;height: 100px;background-color:#192873;}

html:

结果与预想的不太相同。预想中他们之间没有空隙，充满容器，不会换行。结果他们义无反顾地换行了，之间有了一个本不该存在的空隙。
原因也很简单，作为一个带有inline的元素之间换行是会被识别为空格的（哭）。
原理找到了，这里有详细的解释，鑫旭大神就是厉害：张鑫旭对于inline-block的理解。这里是个demo，就用最简单的方法去除空格就好了。
接下来还有个问题：无法通过margin/padding来给他们之间设置间隔。这里想了一个办法：在每个盒子里面嵌套一个盒子，背景设置给里面的，宽度设置比100%小一点，通过margin：auto进行调整位置，这样就有一个可以调整的间隙了~
代码如下：
css：

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
.in-bl{display: inline-block;}
.f{width: 33.333%;height: 100px;background-color: #ab1256;}
.s{width: 33.333%;height: 100px;}
.t{width: 33.333%;height: 100px;background-color:#192873;}
.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}

html：

效果：

大功告成。这样的方法会增加一个嵌套，要设置border-box，也算是有些副作用了。到工作时再根据需要进行取舍吧。

私有云专线服务 html的宽度自适应自适应宽度宽度自适应自适应宽度按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49661.html

css实现左右顶头、宽度自适应的多列、多块并排，多列布局

摘要：今天在工作中遇到了一个问题有三个块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序，还有就是间距是不固定的，并且加了，可能会有副作用。今天在工作中遇到了一个问题：有三个div块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。我第一时间想到的是传统的三列布局，但传统的三列布局都是固定宽度加自适应宽度，从网...

xuhong 2019-08-28 18:21 评论0 收藏0
CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

loonggg 2019-08-29 12:15 评论0 收藏0
CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

Cympros 2019-08-05 10:58 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0