不采用 flex，实现两端对齐布局

最新推荐文章于 2023-06-28 18:30:26 发布

weixin_34129145

最新推荐文章于 2023-06-28 18:30:26 发布

阅读量529

点赞数

文章标签： python

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

版权

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

采用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>

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