摘要:今天在工作中遇到了一个问题有三个块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序,还有就是间距是不固定的,并且加了,可能会有副作用。
今天在工作中遇到了一个问题:有三个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,也算是有些副作用了。到工作时再根据需要进行取舍吧。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111196.html
摘要:今天在工作中遇到了一个问题有三个块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序,还有就是间距是不固定的,并且加了,可能会有副作用。 今天在工作中遇到了一个问题:有三个div块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。 我第一时间想到的是传统的三列布局,但传统的三列布局都是固定宽度加自适应宽度,从网...
CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定位方法 水平居中 子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。 方案选择基本思路:子元素为 行内元素:对父元素设置text-align:center; 定宽块状元素: 设...
摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...
摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...
阅读 1952·2021-11-25 09:43
阅读 639·2021-10-11 10:58
阅读 1706·2019-08-30 15:55
阅读 1705·2019-08-30 13:13
阅读 718·2019-08-29 17:01
阅读 1824·2019-08-29 15:30
阅读 767·2019-08-29 13:49
阅读 2124·2019-08-29 12:13