css实现自适应的两边无间隙的三栏布局（自动换行）

最新推荐文章于 2024-09-05 01:30:55 发布

木木林_

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量1.7k

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/qq_44812835/article/details/108291258

版权

本文介绍了如何使用CSS实现自适应的三栏布局，无间隙且能自动换行。通过两种方法达成目标：一是利用float和负margin，二是采用flex布局，通过justify-content: space-between和伪元素占位实现。

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

1. 我们先看一下下面的布局效果

在这里插入图片描述

2. 实现思路

1) 要是实现自动换行排列，我们首先想到float加margin-right来实现，那我们来实现一下

比如一个box为宽1000px 每个item宽320px margin-right：20px 我们会发现效果如下会自动换行因为最右边超出了20px的margin值
-
这时我们可以给item的外层加一个div 设置margin-right：-20px；使得这个盒子的宽度增加20px；来承载item 代码如下

<body>
    <div class="box">
        <div class="item-box">
            <div class="item"></div>
            <div class="item"></div>
            <div class=