介绍 & lt; ul 类=癆rticle"比;
,,,& lt; li 类=癹s-equalheight"比;
,,,,,& lt; p>
,,,,,一家将客户利益置于首位的经纪商,
,,,,,为客户提供专业的交易工具一家将客户利益置于首位的经纪商,
,,,,,为客户提供专业的交易工具一家将客户利益置于首位的经纪商,
,,,,,为客户提供专业的交易工具一家将客户利益置于首位的经纪商,为客户提供专业的交易工具
,,,,,& lt;/p>
,,,& lt;/li>
,,,& lt; li 类=癹s-equalheight"比;
,,,,,& lt; p>一家将客户利益置于首位的经纪商,为客户提供专业的交易工具
,,,,,一家将客户利益置于首位的经纪商,为客户提供专业的交易工具& lt;/p>
,,,& lt;/li>
,,,& lt; li 类=癹s-equalheight"比;
,,,,,& lt; p>一家将客户利益置于首位的经纪商& lt;/p>
,,,& lt;/li>
& lt;才能/ul> .Article {
,,溢出:隐藏。
}
李{.Article>
浮:,才能离开;
保证金才能:0,10 px -9999 px 0;
,,padding-bottom: 9999 px;
,,背景:# 4577直流;
,,宽度:200 px;
,,颜色:# fff;
}
.Article> li> p {
,,填充:10 px;
} jQuery (, document )时(函数(),{
equalheight才能();
});
jQuery(窗口).resize (function (), {
jQuery才能(& # 39;.js-equalheight& # 39;) . css(& # 39;高度# 39;& # 39;汽车# 39;);
equalheight才能();
});
function equalheight (), {
var 才能;heights =, jQuery (“.js-equalheight") . map()函数,{
,,,return jQuery(这).height ();
})才能. get (),
maxHeight 才能=,Math.max.apply (null,,高度);
jQuery才能(“.js-equalheight") .height (maxHeight);
}
这篇文章给大家分享的是有关CSS如何实现多列等高布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> 1,引言
我们在写页面的时候,有的时候会遇到多栏布的局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户体验不是很好!
实际的问题效果如下所示:
<强> 2,需求如下
我们要实现的效果就是不管每个栏目的实际内容多少,都要保证每个栏目是对齐的。
<强> 3,如何解决
HTML代码如下所示:
(1)纯CSS方式解决
CSS代码如下所示:
分析说明:元素设置的padding-bottom尽可能大一些,并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域,正负一抵消,对于页面布局不会有影响。另外的话还需要设置父元素溢出:隐藏把子元素多出来的色块背景隐藏掉,上述CSS解决方法没有任何兼容性问题,可以放心使用哈。
(2) js方式解决
js代码如下所示:
感谢各位的阅读!关于“CSS如何实现多列等高布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
