html中的3列布局研究

来源：互联网发布：java集合类原理编辑：程序博客网时间：2024/06/08 07:30

偶然间有同事问到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>

效果：

阅读全文

0 0