不用flex实现多栏等高布局

最新推荐文章于 2025-01-17 11:32:31 发布

转载最新推荐文章于 2025-01-17 11:32:31 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3407699/blog/2086021

文章标签：

#python

本文介绍了一种使用负margin和padding实现水平居中和等高列布局的方法。通过设置适当的负margin和正padding，可以使不同高度的元素在同一行内保持等高，并且整体布局能够水平居中。

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

2019独角兽企业重金招聘Python工程师标准>>>

采用负margin和padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            margin: auto;
            max-width: 600px;
            overflow: hidden;/*隐藏起子元素超出的部分*/
            /*box的高度有app1和app2中最大的那个决定*/
        }

        .app1, .app2 {
            margin-bottom: -99999px;/*这样足够大*/
            padding-bottom: 99999px;
            width: 30%;
            float: left;
        }

        .app1 {
            background-color: red;

        }

        .app2 {
            background-color: blue;
        }
        .test{
           background-color: red;
        }
        .test p{
            padding: 20px;
            height: 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="app1">
        <p>
            阿达撒撒发顺丰看看剧咖啡店
        </p>
        <p>
            阿达撒撒发顺丰看看剧咖啡店
        </p>
    </div>
    <div class="app2">
        <p>
            上过课大概多少咖喱深V麻烦点卡萨丁
        </p>
        <p>
            当咖啡开工饭是女方
        </p>
        <p>
            当咖啡开工饭是女方
        </p>
        <p>
            当咖啡开工饭是女方
        </p>
        <p>
            当咖啡开工饭是女方
        </p>
    </div>
    <div class="app1">
        <p>
            阿达撒撒发顺丰看看剧咖啡店
        </p>
        <p>
            阿达撒撒发顺丰看看剧咖啡店
        </p>
    </div>
</div>
<hr>
<div class="test">
    <p>
        父元素的高度是auto，包裹性
    </p>
    <p>
        是block的元素（除去替换元素），未设置宽度，则宽度填满父元素
    </p>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/3407699/blog/2086021