前端开发应当把握的CSS完成两列等高合理布局技

日期:2021-03-01 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

1、前言

大家在写网页页面的情况下,有的情况下会遇到多栏合理布局,每一个栏目里边的內容有的情况下将会不1样,这样就会致使每一个栏目具体的高宽比也是不1样的,假如每一个栏目有情况色调的,就会致使每一个栏目地底部是对不齐的,客户体验并不是很好!

具体的难题实际效果以下所示:

2、要求以下

大家要完成的实际效果便是无论每一个栏目地具体內容是多少,都要确保每一个栏目是对齐的。

3、怎样处理

HTML编码以下所示:

<ul class="Article">
    <li class="js-equalheight">
      <p>
      1家将顾客权益置于首位的经记商,
      为顾客出示技术专业的买卖专用工具1家将顾客权益置于首位的经记商,
      为顾客出示技术专业的买卖专用工具1家将顾客权益置于首位的经记商,
      为顾客出示技术专业的买卖专用工具1家将顾客权益置于首位的经记商,为顾客出示技术专业的买卖专用工具
      </p>
    </li>
    <li class="js-equalheight">
      <p>1家将顾客权益置于首位的经记商,为顾客出示技术专业的买卖专用工具
      1家将顾客权益置于首位的经记商,为顾客出示技术专业的买卖专用工具</p>
    </li>
    <li class="js-equalheight">
      <p>1家将顾客权益置于首位的经记商</p>
    </li>
  </ul>

(1)纯CSS方法处理

CSS编码以下所示:

.Article{
  overflow: hidden;
}

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

.Article>li>p{
  padding: 10px;
}

剖析表明:元素设定的padding-bottom尽量大1些,而且必须设定1样尺寸的margin-bottom负值去相抵padding-bottom撑大的地区,正负1相抵,针对网页页面合理布局不容易有危害。此外的话还必须设定父元素overflow:hidden把子元素多出来的色块情况掩藏掉,上述CSS处理方式沒有任何适配性难题,能够安心应用哈。

(2)js方法处理

js编码以下所示:

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);
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS编码完成3角形和饼图 返回下一篇:没有了