css设置多列等高布局的方法示例
前端 / 管理员 发布于 7年前 228
初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。
最终需要的效果:
1. 真实等高布局
flex 技术点:弹性盒子布局flex,默认值就是自带等高布局的特点。
定义flex布局的时候,有一些默认值。
flex-direction
属性定义主轴的方向。默认值为 row
,一般是水平显示。flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
align-item
属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。默认值为 stretch
,元素被拉伸以适应容器。
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div>
css
.box { display: flex;}.left { width: 300px; background-color: grey;}.center { flex: 1; background: red;}.right { width: 500px; background: yellow;}
See the Pen equal-hight-layout-flex by weiqinl ( @weiqinl ) on CodePen .
2. 真实等高布局
table-cell 技术点:table布局天然就具有等高的特性。
display设置为 table-cell
,则此元素会作为一个表格单元格显示。类似于使用标签 <td>
或者 <th>
。
HTML结构
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div>
CSS样式
.left { display: table-cell; width:30%; background-color: greenyellow;}.center { display: table-cell; width:30%; background-color: gray;}.right { display: table-cell; width:30%; background-color: yellowgreen;}
3. 假等高列布局 内外边距底部正负值
实现:设置父容器的overflow属性为hidden。给每列设置比较大的底内边距,然后用数值相似的负外边距消除这个高度。
技术点
HTML结构
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div>
CSS
.box { overflow: hidden;}.box > div{ /** * padding-bottom 设置比较大的正值。 * margin-bottom 设置绝对值大的负值。 **/ padding-bottom: 10000px; margin-bottom: -10000px; float:left; width:30%;}.left { background-color: greenyellow;}.center { background-color: gray;}.right { background-color: yellowgreen;}
4. 假等高布局,背景视觉效果
技术点: float浮动,并设置每一列的宽度。设置父元素为行内块级元素,之后再利用线性渐变的图片来设置父元素的背景凸显等高的效果
CSS linear-gradient
函数用于创建一个表示两种或多种颜色线性渐变的图片。
display: inline-block
,设置为行内块级元素。
<div class="box five-columns"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div></div>
css
/** 需要自己算出平均每列的宽度 */.box { display: inline-block; background: linear-gradient( to right, red, red 20%, blue 20%, blue 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, grey 80%, grey);} .col { float: left; width: 16%; padding: 2%;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号