CSS 多列等高

2021-07-11 19:43:40 字數 3275 閱讀 8452

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

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

直接使用bootstrap的col-*來實現這個簡單的布局就ok啦~

class="section">

class="section__title">初版h1>

class="section__items row">

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

在火箭對陣湖人的比賽中,科比單節15分,夢回巔峰狂砍35分~p>

div>

div>

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

今日勇士於馬刺的比賽中,庫里單節16分的氣勢再也壓不住,末節的柳暗花明,不僅僅是擁抱72勝的欣喜若狂,也是終結連續33場客負馬刺這一尷尬記錄的仰天長嘯,更是打破塵封20年紀錄的蠢蠢欲動.p>

div>

div>

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

猛龍客場挑戰尼克斯,最終93-89戰勝對手.此役德羅贊砍下27分,他職業生涯總得分達到9426分,超越文斯-卡特,躍居猛龍隊史得分榜第2位,僅次於克里斯-波什.p>

div>

div>

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

在尼克斯對陣猛龍的比賽中,安東尼裡突外投,砍得21分6籃板.p>

div>

div>

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

馬刺在主場以86-92不敵勇士,遭遇本賽季主場首敗.他們主場連勝紀錄停留在48場,包括創nba紀錄的開局主場39連勝.p>

div>

div>

class="section__item col-xs-12 col-sm-6 col-md-4">

class="section__item-wrap">

在火箭對陣湖人的比賽中,哈登末節20分,大力劈扣轟40+13.p>

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

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

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

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

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

使用神器flexbox,它能簡單的搞定一切~

css 多列等高

高度不一的列以等高方式布局。設計師說某頁面的新聞介紹,由於新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決,讓設計師妹妹知道我們程式師哥哥的威武。原型設計稿大致如下 直接使用bootstrap的col 來實現這個簡單的布局就ok啦 在火箭對陣湖人的比賽中,...

純CSS實現多列等高

overflow negtive margin 多列高邊距實現 overflow negtive margin多列高邊距實現 overflow negtive margin 多列高邊距實現 title style type text css body parent child style head ...

CSS技巧 2 多列等高布局

前言 最近,面試的時候都碰到一些關於利用css實現多列等高布局或者一側寬度固定,另一側寬度自適應的問題,下面稍微總結一下 規定下面的布局,實現多列等高布局,要求兩列背景色等高。1 div class container 2 div class left 多列等高布局左 多列等高布局左 div 3 d...