html中的3列布局研究

最新推荐文章于 2024-09-04 18:16:53 发布

xsgkaka

最新推荐文章于 2024-09-04 18:16:53 发布

阅读量3k

点赞数 6

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

本文链接：https://blog.csdn.net/xsgkaka/article/details/72519238

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

偶然间有同事问到3列布局的问题。细细想来，这个问题貌似我也研究的不是很透彻，索性今天上午事情不是很多，就来研究一下html中3列布局，如何实现，才能更简洁更好。

首先，我们常说的三列布局指的是：左右两边固定宽度，中间部分自适应。

我想两列布局大家都知道如何实现吧。

贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .left{
            height:60px;
            width:30%;
            background: red;
            float: left;
            margin-left: 30%;
        }
        .center{
            height:60px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
</body>
</html>

效果：

我们简单理解下，默认的div是独占一行的。要想实现两列并排就要通过float来打乱这个默认的布局系统。我们知道float：left是向左浮动。用这个属性的话，

白话理解就是，某一个div用了float的话，这个div就不在给默认的布局流识别了，他就独立了，他所占用的这一块空间，等于从页面上给挖走了。后续的元素还是按照默认的布局流模式排列的话，是不是要从他后面添加呢。所呈现出来的效果就如上图所示喽。

那我们想实现三列布局的话，是不是得在右侧也得挖走一块空间呢？

看如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .left{
            height:60px;
            width:30%;
            background: red;
            float: left;
        }
        .center{
            height:60px;
            background: green;
            margin-left: 30%;
        }
        .right{
            height:60px;
            width:30%;
            background: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

效果：

咦？这是为什么？1、蓝色块为什么没有去右边？

难道是因为我们绿色（中间）太长了？蓝色（靠右）挖不成了，那我们改的短一些。

哎？为什么还没有过去呢？

原来我们忘记了，一个刚刚谈到的原则，默认html中div是独占一行的，即使他真实的宽度没有将整行占满。

那么好吧，这个改如何呢？

想一想，我们是不是可以先把右边的一块给挖走，然后再添加中间的一部分呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .left{
            height:60px;
            width:30%;
            background: red;
            float: left;
        }
        .center{
            height:60px;
            background: green;
        }
        .right{
            height:60px;
            width:30%;
            background: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        中间这一部分
    </div>
</body>
</html>

效果：