css 多列等高
多列等高
高度不一的列以等高方式布局。
需求
设计师说某页面的新闻介绍,由于新闻内容不同导致显示区域的高度不一致,现需要使其高度视觉上保持一致。小加同学觉得必须迅速解决,让设计师妹妹知道我们程序师哥哥的威武。原型设计稿大致如下:
初版
思路
直接使用bootstrap的col-*来实现这个简单的布局就OK啦~
HTML
初版 ### 科比狂砍35 在火箭对阵湖人的比赛中,科比单节15分,梦回巅峰狂砍35分~ ### 勇士72胜 今日勇士于马刺的比赛中,库里单节16分的气势再也压不住,末节的柳暗花明,不仅仅是拥抱72胜的欣喜若狂,也是终结连续33场客负马刺这一尴尬记录的仰天长啸,更是打破尘封20年纪录的蠢蠢欲动. ### 德罗赞得分里程碑 猛龙客场挑战尼克斯,最终93-89战胜对手.此役德罗赞砍下27分,他职业生涯总得分达到9426分,超越文斯-卡特,跃居猛龙队史得分榜第2位,仅次于克里斯-波什. ### 安东尼21+6 在尼克斯对阵猛龙的比赛中,安东尼里突外投,砍得21分6篮板. ### 马刺战勇士1胜3负 马刺在主场以86-92不敌勇士,遭遇本赛季主场首败.他们主场连胜纪录停留在48场,包括创NBA纪录的开局主场39连胜. ### 哈登末节20分 在火箭对阵湖人的比赛中,哈登末节20分,大力劈扣轰40+13.
CSS
.section {
margin-bottom: 100px;
}
.sectionitems {
width: 100%;
}
.sectionitem-wrap {
margin: 5px;
padding: 10px;
background-color: # EEE;
}
效果图
吐槽
什么情况,一行三个、二个,这看起来太乱了,肯定会遭设计师鄙视的~ 必须采用淫技解决这个问题,让设计师妹妹崇拜哥~
分割线来咯~ 你能够尝试着解决这个问题吗?
改版1
思路
由于内容不同的新闻其高度不一致,使元素左浮动卡在高度最大的右边,可以使用clear: left;来解决这个问题。
CSS
.section {
margin-bottom: 100px;
}
.sectionitems {
width: 100%;
}
.sectionitem-wrap {
margin: 5px;
padding: 10px;
background-color: # EEE;
}
@media (min-width: 768px) {
.section-revision--clear .sectionitem:nth-child(odd) {
clear: left;
}
}
@media (min-width: 992px) {
.section-revision--clear .sectionitem:nth-child(odd) {
clear: none;
}
.section-revision--clear .section__item:nth-child(4) {
clear: left;
}
}
效果图
改版2
思路
参照不规整元素的宽高等比例,预估高度范围,使用padding属性完成~
CSS
.section {
margin-bottom: 100px;
}
.sectionitems {
width: 100%;
}
.sectionitem-wrap {
margin: 5px;
padding: 10px;
background-color: # EEE;
}
@media (min-width: 768px) {
.section-revision--padding .section__item {
position: relative;
padding-top: 25%;
}
.section-revision--padding .section__item-wrap { position: absolute; top: 0; margin: 5px;}
}
@media (min-width: 1200px) {
.section-revision--padding .section__item {
position: relative;
padding-top: 20%;
}
}
效果图
改版3
思路
table中一行的每个格子都是等高的,那么我们可以使用css的display: inline-table来解决这个问题。
CSS
.section {
margin-bottom: 100px;
}
.sectionitems {
width: 100%;
}
.sectionitem-wrap {
margin: 5px;
padding: 10px;
background-color: # EEE;
}
.section-revision--table .sectionitems {
display: table-row;
}
.section-revision--table .sectionitem {
display: inline-table;
float: none;
}
效果图
改版4
思路
使用神器flexbox,它能简单的搞定一切~
CSS
.section {
margin-bottom: 100px;
}
.sectionitems {
width: 100%;
}
.sectionitem-wrap {
margin: 5px;
padding: 10px;
background-color: # EEE;
}
.section-revision--flex .section__items {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
效果图
关键知识点
clear
w3school
padding
ipluser
display: inline-table
w3school
flex
ruanyifeng
资源
在线测试
源代码
关键字:css, padding, bootstrap, html
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!