HTML与CSS中多列等高问题？

最新推荐文章于 2025-06-11 14:55:28 发布

让我看看谁在学习

最新推荐文章于 2025-06-11 14:55:28 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

文章标签：多列等高 web前端布局

本文链接：https://blog.youkuaiyun.com/weixin_42545184/article/details/82499303

本文介绍两种利用CSS实现多列等高的方法，一种是通过margin和padding调整，另一种是使用table属性，帮助解决排版中常见的不对齐问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在排版时是否会遇到多列排列时由于内容长短不一而导致各列不对齐，怎么使多个div自适应内部文字高度且等高？

问题展示

解决办法

1：通过margin/padding实现等高对齐（每列设置很大的padding，再设置一个很大的负的margin值矫正）

如果用js方法以最高列去设置所有列的高度，会造成刚打开页面时高度不一致，后来忽然对齐了。

代码：

<!DOCTYPE html>
<html>

<head>
       <meta charset="utf-8" />
       <title></title>
       
       <style type="text/css">
           .wrapper{
               width: 1000px;
               height: 400px;
               overflow: hidden;
               border: 1px solid black;
           }
           .wrapper .content{
               width: 200px;
               float: left;
               background-color: #ececec;
               border: 1px solid #ccc;
               padding-bottom: 900px;
               margin-bottom: -880px;
           }
       </style>
   </head>