css实现等高布局两栏自适应布局三栏自适应布局

最新推荐文章于 2022-11-08 09:38:03 发布

charlene程程

最新推荐文章于 2022-11-08 09:38:03 发布

阅读量4.7k

点赞数 1

分类专栏： css 布局文章标签： css 布局

本文链接：https://blog.csdn.net/charlene0824/article/details/51222502

版权

本文总结了CSS布局中常见的等高布局、两栏自适应布局和三栏自适应布局的实现方法，包括padding补值法、flex布局、display: table-cell等，以及浮动布局和绝对定位在两栏和三栏布局中的应用。

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

总结一下css常用的布局样式

等高布局

等高布局实现方法有很多在这里总结常用的三种方法

padding补值法

该方法是通过负margin，同时将padding的值设为正的margin值实现的具体实现方法如下：

<div class="container">
    <div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
    <div class="item2">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
</div>

相应的css实现如下

.container{
        width:800px;
        background-color: #98F59E;
        overflow: hidden;

    }
    .item1,.item2{
        float:left;
        width:300px;