摘要:多列等高高度不一的列以等高方式布局。需求設計師說某頁面的新聞介紹,由于新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。
多列等高
高度不一的列以等高方式布局。
需求設計師說某頁面的新聞介紹,由于新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決,讓設計師妹妹知道我們程序師哥哥的威武。原型設計稿大致如下:
直接使用bootstrap的col-*來實現這個簡單的布局就OK啦~
HTMLCSS初版
科比狂砍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.
.section { margin-bottom: 100px; } .section__items { width: 100%; } .section__item-wrap { margin: 5px; padding: 10px; background-color: #EEE; }效果圖 吐槽
什么情況,一行三個、二個,這看起來太亂了,肯定會遭設計師鄙視的~ 必須采用淫技解決這個問題,讓設計師妹妹崇拜哥~
分割線來咯~ 你能夠嘗試著解決這個問題嗎?
由于內容不同的新聞其高度不一致,使元素左浮動卡在高度最大的右邊,可以使用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; }效果圖 關鍵知識點
資源 在線測試 源代碼clear
w3school
padding
ipluser
display: inline-table
w3school
flex
ruanyifeng
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115258.html
摘要:多列等高布局是在一個容器里面,并排的多列,如果內容的高度無法在一開始確定例如內容是動態的,又需要讓各列自然地撐開不出現每列里面的滾動條,這時候需要用或者的方法把各列高度設置為最高列的高度。 多列等高布局是在一個容器里面,并排的多列,如果內容的高度無法在一開始確定(例如內容是動態的),又需要讓各列自然地撐開(不出現每列里面的滾動條),這時候需要用css或者js的方法把各列高度設置為最高列...
摘要:基于這樣的布局方式,你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要:基于這樣的布局方式,你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要:基于這樣的布局方式,你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
閱讀 553·2023-04-26 02:59
閱讀 691·2023-04-25 16:02
閱讀 2154·2021-08-05 09:55
閱讀 3542·2019-08-30 15:55
閱讀 4640·2019-08-30 15:44
閱讀 1797·2019-08-30 13:02
閱讀 2192·2019-08-29 16:57
閱讀 2287·2019-08-26 13:35