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
Even though it's not Halloween, it's wort...
Create a mysql user and authorize: Format: grant ...
HTML5 adds a native placeholder attribute for inp...
Table of contents Scenario Requirements glibc ver...
Maybe everyone knows that js execution will block...
This article shares the specific code for JavaScr...
When creating a MySQL container with Docker, some...
1. Pull the official 5.0.3 image [root@localhost ...
Table of contents Why do we need garbage collecti...
Table of contents Jenkins installation Install Ch...
Table of contents 1. Error phenomenon 2. Error An...
After the user logs out, if the back button on the...
1: What is openssl? What is its function? What is...
Table of contents 1. Introduction 2. Analysis of ...
The relevant person in charge of Baidu Input Metho...