前端应该掌握的CSS实现多列等高布局技巧

源码坊

1、引言
我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每个栏目的底部是对不齐的，用户体验不是很好！
实际的问题效果如下所示：

2、需求如下

我们要实现的效果就是不管每个栏目的实际内容多少，都要保证每个栏目是对齐的。

3、如何解决

HTML代码如下所示：

1. <ul class="Article">     <li class="js-equalheight">       <p>       一家将客户利益置于首位的经纪商，       为客户提供专业的交易工具一家将客户利益置于首位的经纪商，       为客户提供专业的交易工具一家将客户利益置于首位的经纪商，       为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具       </p>     </li>     <li class="js-equalheight">       <p>一家将客户利益置于首位的经纪商，为客户提供专业的交易工具       一家将客户利益置于首位的经纪商，为客户提供专业的交易工具</p>     </li>     <li class="js-equalheight">       <p>一家将客户利益置于首位的经纪商</p>     </li>   </ul>

复制代码

（1）纯CSS方式解决
CSS代码如下所示:

1. .Article{   overflow: hidden; }  .Article>li{   float: left;   margin: 0 10px -9999px 0;   padding-bottom: 9999px;   background: #4577dc;   width: 200px;   color: #fff; }  .Article>li>p{   padding: 10px; }

复制代码

分析说明：元素设置的padding-bottom尽可能大一些，并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域，正负一抵消，对于页面布局不会有影响。另外的话还需要设置父元素overflow：hidden把子元素多出来的色块背景隐藏掉，上述CSS解决方法没有任何兼容性问题，可以放心使用哈。
（2）js方式解决
js代码如下所示:

1. jQuery( document ).ready(function() {   equalheight(); });  jQuery(window).resize(function() {   jQuery('.js-equalheight').css('height','auto');   equalheight(); });  function equalheight() {   var heights = jQuery(".js-equalheight").map(function() {     return jQuery(this).height();   }).get(),    maxHeight = Math.max.apply(null, heights);    jQuery(".js-equalheight").height(maxHeight); }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码语。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-312-1-1.html