不採用 flex，實現兩端對齊佈局

時間 2019-11-18

標籤採用 flex 實現兩端對齊佈局欄目 Flex 简体版

原文原文鏈接

採用text-align：justify結合僞元素，注意有些地方不能有空格或者回車，否則樣式會有問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 256px;
            height: 256px;
            border-bottom: 1px dashed #ccc;
            text-align: justify;
            font-size: 0;
            /*text-align:justify 要想有兩端對齊的效果，需
要知足兩點：一是有分隔點，如空格；二是要超過一行*/
        }
        /*如何要兼容 ie7就不要用僞元素，用dom元素代替*/
        .box:before {
            content: "";
            display: inline-block;
            height: 100%;
            /*經過這個僞元素前面的幽靈節點，實現底部對齊*/
        }
        .box:after {
            content: "";
            display: inline-block;
            width: 100%;
            /*這個爲知足text-align:justify要超過一行的要求*/
        }
        .bar {
            display: inline-block;
            width: 20px; height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<!--第一個i標籤前面千萬不要有空格或者回車，空格和回車就是佔用空白的位置-->
<div id="box" class="box"><i class="bar"></i>
    <i class="bar item1"></i>
    <i class="bar item2"></i>
    <i class="bar item3"></i>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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