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

问题展示

HTML与CSS中多列等高问题?

解决办法

1:通过margin/padding实现等高对齐(每列设置很大的padding,再设置一个很大的负的margin值矫正)

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

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/css1.css" />-->
        <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>

    <body>
        <div class="wrapper">
            <div class="content">内容一</div>
            <div class="content">内容二</div>
            <div class="content">内容三</div>
        </div>
    </body>

</html>

但是这样做缺点是底部的border 没有了,设置圆角也不起作用,因为设置了很大的padding值导致高度变得很大。

2:借助td实现等高

代码:

.wrapper{

display:table;

border-spacing:20px;/*td间距*/

}

.wrapper .content{

display:table-cell;

width:1000px;

border-radious:5px;

}

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-10-17
  • 2021-06-26
  • 2022-12-23
  • 2022-02-25
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-10-13
  • 2021-07-11
  • 2021-11-02
  • 2021-08-22
  • 2021-05-31
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案