css实现三列浮动流式布局

最新推荐文章于 2024-09-25 10:28:03 发布

闹屋

最新推荐文章于 2024-09-25 10:28:03 发布

阅读量4.1k

点赞数

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

本文链接：https://blog.csdn.net/Jutal_ljt/article/details/71439844

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、html内容

我们将整个屏幕分为左右两大部分，再将左部分分为两列以实现三列的布局。使用基于浮动的方式进行布局，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
    <div class="content">

        <div class="primary">
            <div class="line1">
                <span>A</span>
            </div>
            <div class="line2">
                <span>B</span>
            </div>
        </div>

        <div class="secondary">
            <span>C</span>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

因为浮动方式元素脱离文档流，所以最后留下一个div进行清理。

二、css内容

搭建好基本框架后，对对应的类添加css，其中我们设置整个wrapper宽度为整个屏幕的80%，并且使用margin对wrapper进行居中，代码及图片如下:

html body {
    height: 100%;
    margin: 0;
}
.wrapper {
    width: 80%;
    margin: 0 auto; /* 上下为0 左右auto*/
    height: 100%;
    background-color: #FF3333;
}

wrapper完成效果图
然后对对应的primary和secondary进行设计，primary占wrapper的70%，secondary占30%，代码及完成后效果如下，其中注意display属性将div变为行内元素，同时将字体调大一些：

html body {
    height: 100%;
    margin: 0;
}
.wrapper {
    width: 80%;
    margin: 0 auto; /* 上下为0 左右auto*/
    text-align: center;
    height: 100%;
    background-color: #FF3333;
    font-size: 300px;
}

.content * {
    display: inline;
}

.content .primary {
    width: 70%;
    float: left;
    display: inline;
    background-color: #0099FF;
}

.content .secondary {
    width: 30%;
    float: right;
    display: inline;
    background-color: #33FF66;
}

完成两部分布局
最后在第一个primary中分割为两列，完成三列布局，再进行清理，并设置整体最小宽度和最大宽度，代码总体如下：

html body {
    height: 100%;
    margin: 0;
}

.wrapper {
    width: 80%;
    margin: 0 auto; /* 上下为0 左右auto*/
    text-align: center;
    height: 100%;
    background-color: #FF3333;
    font-size: 300px;
    min-width: 2.5em;
    max-width: 6em;
}

.content * {
    display: inline;
}

.content .primary {
    width: 70%;
    float: left;
    display: inline;
    background-color: #0099FF;
}

.content .secondary {
    width: 30%;
    float: right;
    display: inline;
    background-color: #33FF66;
}

.content .primary .line1 {
    width: 60%;
    float: left;
    display: inline;
    background-color: #FFFF99;
}

.content .primary .line2 {
    width: 35%;
    float: right;
    display: inline;
    background-color: #FF9999;
}

.clear {
    clear: both;
}