三列布局的几种方式

最新推荐文章于 2021-07-07 15:07:24 发布

YuLi_Zoe

最新推荐文章于 2021-07-07 15:07:24 发布

阅读量2.6k

点赞数

分类专栏： CSS基础文章标签：布局 css

本文链接：https://blog.csdn.net/YuLi_Zoe/article/details/48711839

版权

CSS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、绝对定位法

两边用绝对定位，中间用margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后面（中间栏会占据整行）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
    width:400px;
    height:500px;
    background:red;
    position:absolute;
    left:0;
}
.center{

    height:500px;
    background:yellow;
    margin-left:470px;
    margin-right:470px;
}
.right{
    width:400px;
    height:500px;
    background:red;
    position:absolute;
    right:0;
}

</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

</body>
</html>

二、自身浮动法

左栏左浮动，右栏右浮动，中间主体放在左栏右栏后面（中间栏会占据整行），中间的宽度不固定，但是要加上margin左右的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
    width:400px;
    height:500px;
    background:red;
    float:left;
}
.center{

    height:500px;
    background:yellow;
    margin-left:470px;
    margin-right:470px;
}
.right{
    width:400px;
    height:500px;
    background:red;
    float:right;
}

</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>

三、两列布局中再次运用两列布局

两列布局分别float:left和float:right，然后再在右栏中放两个div，再float:left和float:right

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
    width:33%;
    height:500px;
    background:red;
    float:left;
}

.right{
    width:66%;
    height:500px;
    background:red;
    float:right;
}
.right1{
    width:39%;
    height:500px;
    background:yellow;
    float:left;
}
.right2{
    width:60%;
    height:500px;
    background:blue;
    float:right;
}

</style>
</head>
<body>
<div class="left"></div>
<div class="right">
    <div class="right1"></div>
    <div class="right2"></div>
</div>
</body>
</html>

YuLi_Zoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局的几种方式

一、绝对定位法两边用绝对定位，中间用margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后面（中间栏会占据整行）<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.left{ width:400px; height:500px; background:red;
复制链接

扫一扫