css实现三列浮动流式布局

来源：互联网发布：核西南物理研究院知乎编辑：程序博客网时间：2024/06/05 04:21

一、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;}

最后效果图如下，使用百分比来分割每一个部分，每个部分的大小会随着浏览器的变化而变化，实现了页面的灵活流式布局。

全部完成

0 0