实现三栏布局的方法

最新推荐文章于 2022-07-29 21:33:22 发布

lpl_L

最新推荐文章于 2022-07-29 21:33:22 发布

阅读量258

点赞数 2

本文链接：https://blog.csdn.net/lpl_L/article/details/108268632

版权

CSS实现三栏布局(5种)

常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局

1、float布局：
loat最初的设计的初衷是为了解决文字环绕的问题，即给一个图片设置float属性之后会使文字环绕在图片周围显示。float之所以可以实现文字环绕是源于设置float属性的元素可以脱离文档流，使父元素高度塌陷。
代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动实现三栏布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中
            <h2>浮动布局</h2>
        </div>    
    </article>
</body>

这里我们给左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right ,由于宽度高度已知所以我们可以给其设置指定的宽高 width:300px, height:100px


.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #631D9F;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
    background: red;
}

中间的样式：

.center{
    margin-left: 300px;
    margin-right: 300px;
    
}

Position布局:
html模版:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
</head>
<body>
    <article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>绝对定位</h2>
        </div>
        <div class="right">右</div>
    </article>
</body>
</html>

给左中右都使用 absolute 绝对定位，由于absolute 是相当于static定位以外的第一个父元素进行定位，所以我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。、

CSS样式:


.left{
    position: absolute;
    left: 0;
    width: 300px;
    
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}

table布局:
html模版:这里的html模版和 position使用的html一样

table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell

CSS样式:


.main{
    width: 100%;
    display: table;
}
.left,.center,.right{
    display: table-cell;
}
.left{
    width: 300px;
    
}
.center{
    background-color: blue;
}
.right{
    width: 300px;
    background-color: red;
}

由于table布局本身已经有自己特有的属性,所以我们只需要设置其dispaly属性就可以达到我们的目的。

弹性(flex)布局:
html模版:这里的html模版和 position使用的html一样

flex布局是W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。

当给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列。

CSS样式:


.main {
    display: flex;
}
.left{
    width: 400px;
    
}
.center{
    background-color: blue;
    word-break: break-word;
}
.right{
    background-color: red;
    width: 400px;
}

网格(gird)布局:
html模版: 这里的html模版和 position使用的html一样

网格它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

gird提供了 gird-template-columns、grid-template-rows属性让我们设置行和列的高、宽

CSS样式:


.div{
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

总结:
1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。

2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局

3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息

4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上

5、grid布局很强大，但是兼容性很差。

lpl_L

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫