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
Table of contents 1. Use object to create an obje...
CentOS6.9 installs Mysql5.7 for your reference, t...
Promise is a new solution for asynchronous progra...
Mainly from two aspects: 1. Highlight/Line Break ...
For example, when you create a new table or updat...
The color matching in website construction is ver...
This article example shares the specific code of ...
Table of contents 1. Theory SERIALIZABLE REPEATAB...
Environmental Description: There is a running MyS...
Configuration Preface Project construction: built...
I was woken up by a phone call early in the morni...
Pull the image root@EricZhou-MateBookProX: docker...
background When developing a feature similar to c...
Copy code The code is as follows: <style> ....
Common application scenarios The interfaces of cu...