不用flex實現多欄等高佈局

時間 2019-11-18

標籤不用 flex 實現等高佈局欄目 Flex 简体版

原文原文鏈接

採用負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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。