js設定padding JS 之多列等高布局

2021-10-12 05:35:48 字數 2614 閱讀 4179

閱讀本文約需要5分鐘1 js 之多列等高布局

1、文章引言

我們在寫頁面的時候，經常會遇到多欄布局的情況，如果欄目帶有背景色並且欄目內容高度不一樣的話，就會導致每個欄目的底部是無法不齊的，這樣在排版布局以及給使用者的體驗不是很好！實際的問題效果如下圖所示：

我們要實現的效果就是當各個欄目內容不一樣的情況下，保證各個欄目還是對齊的。想要實現的效果如下圖所示：

html結構**如下所示：

一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具
一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具一家將客戶利益置於首位的經紀商，為客戶提供專業的交易工具一家將客戶利益置於首位的經紀商

.article.article>li.article>li>p
元素設定的padding-bottom盡可能大一些，並且需要設定一樣大小的margin-bottom負值去抵消padding-bottom撐大的區域，正負一抵消，對於頁面布局不會有影響。另外的話還需要設定父元素overflow：hidden把子元素多出來的色塊背景隱藏掉。

2、模仿table布局

.article.article>li.article>li>p
table元素中的table-cell元素預設就是等高的。
.article.article>li.article>li>p
flex中的伸縮專案預設為拉伸為父元素的高度，同樣可以實現等高效果。在pc端相容性不是很好，在ie9以及ie9以下不支援。
.article.article>li.article>li>p
grid布局的缺點和flex一樣，pc端相容性不是很好，ie9以及ie9以下不支援。
.article>li.article>li>p
jquery( document ).ready(function() );jquery(window).resize(function() );function setequalheight() ).get();}
今天

就分享這麼多，關於js 之多列等高布局，你學會了多少？丟幫助

《js動畫效果》之多物體動畫

學習資源來自慕課網 js動畫效果 多物體運動 給多個元素加上同一動畫效果，比如下面兩個例子 1.網頁上有一ul,ul中有三個li元素，要求滑鼠移到 onmouseover li 元素上產生動畫效果 寬度值增加到300px，滑鼠移出 onmouseout li 元素產生動畫效果 寬度值復原到200px...

JS翻轉器之多個鏈結觸發

翻轉器在網頁中的應用並不少見，下面我將介紹兩種用js實現的方法，以供學習 第一種 主要是利用getattribute及setattribute這兩個函式，以下是html，css及js html css imgs li a link,a visited a hover,a active js wind...

通過js設定css

firefox等可以使用 var dom document.getelementbyid name dom.setattribute style width 10px height 10px border solid 1px red ie中則必須使用style.csstext var dom doc...