多列等高

高度不一的列以等高方式布局。

需求

設計師說某頁面的新聞介紹，由于新聞內容不同導致顯示區域的高度不一致，現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決，讓設計師妹妹知道我們程序師哥哥的威武。原型設計稿大致如下:

bootstrap 柵格系統

思路

直接使用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;

}

.section__items {

width: 100%;

}

.section__item-wrap {

margin: 5px;

padding: 10px;

background-color: #EEE;

}

效果圖

吐槽

什么情況，一行三個、二個，這看起來太亂了，肯定會遭設計師鄙視的～ 必須采用淫技解決這個問題，讓設計師妹妹崇拜哥～

分割線來咯～ 你能夠嘗試著解決這個問題嗎？

clear 清除浮動

思路

由于內容不同的新聞其高度不一致，使元素左浮動卡在高度最大的右邊，可以使用clear: left;來解決這個問題。

CSS

.section {

margin-bottom: 100px;

}

.section__items {

width: 100%;

}

.section__item-wrap {

margin: 5px;

padding: 10px;

background-color: #EEE;

}

@media (min-width: 768px) {

.section-revision--clear .section__item:nth-child(odd) {

clear: left;

}

}

@media (min-width: 992px) {

.section-revision--clear .section__item:nth-child(odd) {

clear: none;

}

.section-revision--clear .section__item:nth-child(4) {

clear: left;

}

}

效果圖

padding + position

思路

參照不規整元素的寬高等比例，預估高度范圍，使用padding屬性完成～

CSS

.section {

margin-bottom: 100px;

}

.section__items {

width: 100%;

}

.section__item-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%;

}

}

效果圖

table

思路

table中一行的每個格子都是等高的，那么我們可以使用css的display: inline-table來解決這個問題。

CSS

.section {

margin-bottom: 100px;

}

.section__items {

width: 100%;

}

.section__item-wrap {

margin: 5px;

padding: 10px;

background-color: #EEE;

}

.section-revision--table .section__items {

display: table-row;

}

.section-revision--table .section__item {

display: inline-table;

float: none;

}

效果圖

flexbox

思路

使用神器flexbox，它能簡單的搞定一切～

CSS

.section {

margin-bottom: 100px;

}

.section__items {

width: 100%;

}

.section__item-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;

}

效果圖

關鍵知識點

資源

總結

以上是生活随笔為你收集整理的css两列等高,css 多列等高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。