多列等高

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

需求

設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺(jué)上保持一致。小加同學(xué)覺(jué)得必須迅速解決，讓設(shè)計(jì)師妹妹知道我們程序師哥哥的威武。原型設(shè)計(jì)稿大致如下:

bootstrap 柵格系統(tǒng)

思路

直接使用bootstrap的col-*來(lái)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的布局就OK啦～

HTML

初版

科比狂砍35

在火箭對(duì)陣湖人的比賽中,科比單節(jié)15分,夢(mèng)回巔峰狂砍35分~

勇士72勝

今日勇士于馬刺的比賽中,庫(kù)里單節(jié)16分的氣勢(shì)再也壓不住,末節(jié)的柳暗花明,不僅僅是擁抱72勝的欣喜若狂,也是終結(jié)連續(xù)33場(chǎng)客負(fù)馬刺這一尷尬記錄的仰天長(zhǎng)嘯,更是打破塵封20年紀(jì)錄的蠢蠢欲動(dòng).

德羅贊得分里程碑

猛龍客場(chǎng)挑戰(zhàn)尼克斯,最終93-89戰(zhàn)勝對(duì)手.此役德羅贊砍下27分,他職業(yè)生涯總得分達(dá)到9426分,超越文斯-卡特,躍居猛龍隊(duì)史得分榜第2位,僅次于克里斯-波什.

安東尼21+6

在尼克斯對(duì)陣猛龍的比賽中,安東尼里突外投,砍得21分6籃板.

馬刺戰(zhàn)勇士1勝3負(fù)

馬刺在主場(chǎng)以86-92不敵勇士,遭遇本賽季主場(chǎng)首敗.他們主場(chǎng)連勝紀(jì)錄停留在48場(chǎng),包括創(chuàng)NBA紀(jì)錄的開(kāi)局主場(chǎng)39連勝.

哈登末節(jié)20分

在火箭對(duì)陣湖人的比賽中,哈登末節(jié)20分,大力劈扣轟40+13.

CSS

.section {

margin-bottom: 100px;

}

.section__items {

width: 100%;

}

.section__item-wrap {

margin: 5px;

padding: 10px;

background-color: #EEE;

}

效果圖

吐槽

什么情況，一行三個(gè)、二個(gè)，這看起來(lái)太亂了，肯定會(huì)遭設(shè)計(jì)師鄙視的～ 必須采用淫技解決這個(gè)問(wèn)題，讓設(shè)計(jì)師妹妹崇拜哥～

分割線來(lái)咯～ 你能夠嘗試著解決這個(gè)問(wèn)題嗎？

clear 清除浮動(dòng)

思路

由于內(nèi)容不同的新聞其高度不一致，使元素左浮動(dòng)卡在高度最大的右邊，可以使用clear: left;來(lái)解決這個(gè)問(wèn)題。

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

思路

參照不規(guī)整元素的寬高等比例，預(yù)估高度范圍，使用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中一行的每個(gè)格子都是等高的，那么我們可以使用css的display: inline-table來(lái)解決這個(gè)問(wèn)題。

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，它能簡(jiǎn)單的搞定一切～

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;

}

效果圖

關(guān)鍵知識(shí)點(diǎn)

資源

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。