CSS techniques for achieving multi-column equal height layout that the front end should master

CSS techniques for achieving multi-column equal height layout that the front end should master

1. Introduction

When we are writing a page, we sometimes encounter a multi-column layout. The content in each column may sometimes be different, which will cause the actual height of each column to be different. If each column has a background color, the bottom of each column will be misaligned, and the user experience will not be very good!

The actual problem effect is as follows:

2. The requirements are as follows

The effect we want to achieve is to ensure that each column is aligned regardless of the actual content of each column.

3. How to solve it

The HTML code is as follows:

<ul class="Article">
    <li class="js-equalheight">
      <p>
      A broker that puts the interests of its clients first.
      Provide customers with professional trading tools A broker that puts customer interests first.
      Provide customers with professional trading tools A broker that puts customer interests first.
      Provide customers with professional trading tools A broker that puts customer interests first and provides customers with professional trading tools</p>
    </li>
    <li class="js-equalheight">
      <p>A broker that puts the interests of its customers first and provides customers with professional trading tools. A broker that puts the interests of its customers first and provides customers with professional trading tools.</p>
    </li>
    <li class="js-equalheight">
      <p>A broker that puts clients’ interests first</p>
    </li>
  </ul>

(1) Pure CSS solution

The CSS code is as follows:

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

Analysis and explanation: The padding-bottom of the element should be as large as possible, and a negative margin-bottom value of the same size should be set to offset the area enlarged by the padding-bottom. The positive and negative values ​​will offset each other, and there will be no impact on the page layout. In addition, you also need to set the parent element overflow: hidden to hide the extra color block background of the child element. The above CSS solution does not have any compatibility issues, so you can use it with confidence.

(2) js solution

The js code is as follows:

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  HTML web page hyperlink tag

>>:  React implements multi-component value transfer function through conetxt

Recommend

Summary of JavaScript custom object methods

Table of contents 1. Use object to create an obje...

MySQL 5.7.17 installation and configuration tutorial under CentOS6.9

CentOS6.9 installs Mysql5.7 for your reference, t...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

How to view mysql binlog (binary log)

For example, when you create a new table or updat...

Seven different color schemes for website design experience

The color matching in website construction is ver...

JavaScript code to implement a simple calculator

This article example shares the specific code of ...

Mysql case analysis of transaction isolation level

Table of contents 1. Theory SERIALIZABLE REPEATAB...

Innodb system table space maintenance method

Environmental Description: There is a running MyS...

Kill a bunch of MySQL databases with just a shell script like this (recommended)

I was woken up by a phone call early in the morni...

Example of building a Jenkins service with Docker

Pull the image root@EricZhou-MateBookProX: docker...

MySql8 WITH RECURSIVE recursive query parent-child collection method

background When developing a feature similar to c...

How to implement n-grid layout in CSS

Common application scenarios The interfaces of cu...