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

Scary Halloween Linux Commands

Even though it's not Halloween, it's wort...

Centos6.5 glibc upgrade process introduction

Table of contents Scenario Requirements glibc ver...

Will css loading cause blocking?

Maybe everyone knows that js execution will block...

JavaScript imitates Jingdong carousel effect

This article shares the specific code for JavaScr...

How to automatically execute SQL statements when MySQL in Docker starts

When creating a MySQL container with Docker, some...

How to install redis5.0.3 in docker

1. Pull the official 5.0.3 image [root@localhost ...

Detailed explanation of JavaScript's garbage collection mechanism

Table of contents Why do we need garbage collecti...

Solution to the error in compiling LVGL emulator on Linux

Table of contents 1. Error phenomenon 2. Error An...

Prevent HTML and JSP pages from being cached and re-fetched from the web server

After the user logs out, if the back button on the...

How to generate a free certificate using openssl

1: What is openssl? What is its function? What is...

CocosCreator ScrollView optimization series: frame loading

Table of contents 1. Introduction 2. Analysis of ...

Baidu Input Method opens API, claims it can be ported and used at will

The relevant person in charge of Baidu Input Metho...