A few days ago I discovered a giant artificial intelligence learning website. It is easy to understand and humorous. I couldn’t help but share it with everyone. Click to jump to the website.
- Expected effect
Multiple columns of equal height, the left and right columns are adaptive and have the same height, and different background colors are set respectively
Effect preview:
- Achieved by 6 methods respectively
1. Use padding + margin + overflow to achieve multi-column equal height effect, with good compatibility;
2. The border implements multiple columns of equal height, the width of the left border is 200px, the left column is floating, and the pseudo-element clears and floats;
3. The linear gradient background color of the parent element achieves multiple columns of equal height; 6. display: table-cell implements multiple columns of equal height. 5. display: grid realizes multiple columns of equal height;
4. display: flex realizes multiple columns of equal height;
html：
<div class="