flex之等高布局和普通等高布局对比

最新推荐文章于 2024-09-29 09:36:14 发布

会玩代码的猫

最新推荐文章于 2024-09-29 09:36:14 发布

阅读量143

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129843189

版权

文章展示了如何使用CSS的弹性盒模型创建一个两端对齐的布局，并与传统的浮动布局方法进行比较。通过调整`display`,`justify-content`属性实现弹性盒布局，而浮动布局则依赖于`float`和负`margin`来达到类似效果。这两种方法在网页设计中都有其应用场景。

摘要由CSDN通过智能技术生成

<style>
        /* 弹性盒 */
       /*  .main {
            width: 500px;
            background-color: skyblue;
            display: flex;
            justify-content: space-between;
        }

        .main div {
            width: 100px;
            background-color: red;
        } */

        /* 普通方式 */
        .main {
            width: 500px;
            background-color: skyblue;
           overflow: hidden;
        }

        .main div{
            width: 100px;
            background-color: red;
            float: left;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
        .main div:nth-of-type(2){
            float: right;
        }


    </style>
</head>

<body>
    <div class="main">
        <div>
            <p>测试文字</p>
            <p>测试文字</p>

        </div>

        <div>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
        </div>
    </div>
</body>