多种布局的使用方法

最新推荐文章于 2024-05-21 21:13:29 发布

ikunshizhe

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量77

点赞数

文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/ikunshizhe/article/details/129632092

版权

想要了解多栏布局，我们首先要知道多栏布局里面具体有哪些？

多栏布局具体分为这几个不同的运用方法：

1. 左边固定，右边自适应

2. 圣杯布局

3. 双飞翼布局

4. 等高布局

那么，就让我们开始今天的学习和了解吧！

左边固定，右边自适应的布局：

首先，这是多栏布局最基础的布局，也是最为简便的布局，这个布局的目的就是实现和字面意思一样的结果，首先，我们要设立两个div，并且在后面的div里面嵌套一个div

之后给left加一个position：absolute，让其脱离文档流，然后给right一个百分百的宽度，给right内的box加一个左外边距，其距离和left的宽度一样，目的就是为了让box中的内容不被left所挡住

这样，两栏布局就可以正常实现了！

圣杯布局：

先建立一个div包裹三个div，按照center，left，right依次排开，然后全部浮动，将center设置百分之百，给left和right添加position：relative；

这时候我们发现left和right被挤下去了，这时候我们通过拉动给父元素添加一个左右内边距，再给left的左外边距（margin-left：-100%；）去将其移动到小绿的左上角，right也是拉动左外边距为自身的距离，移动至右上角

这时候我们发现文字被盖住了

这时候我们给left添加一个负属性的自身距离，将自己拉到左边，给right添加一个正属性的自身距离，顶到右边

实现圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
}
.all{
    padding: 0 300px;
}
.center{
    width: 100%;
    height: 400px;
    background-color: green;
    float: left;
}

.left{
    width: 300px;
    height: 400px;
    background-color: orange;
    margin-left: -100%;
   float: left;
   position: relative;
   left: -300px;
}

.right{
    width: 300px;
    height: 400px;
    background-color: skyblue;
float: left;
margin-left: -300px;
position: relative;
left: 300px;
}




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

双飞翼布局：

双飞翼布局和圣杯布局是类似的方法，但是用到的方法则是外套div，用里面div的外边距去让center子元素的内容呈现，我们首先给center设置一个widht：100%；全部浮动

然后把左右两个div拉到两边，并让box使用外边距挤开两边

便可实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
}
.center{
    width: 100%;
    float: left;
    height: 400px;
    background-color: rgb(0, 0, 0);
    
}
.box{
    width: 100%;
    height: 400px;
    background-color: gold;
    margin: 0 300px;
}

.left{
    width: 300px;
    height: 400px;
    background-color: blue;
    float: left;
    margin-left: -100%;
}
.right{
    width: 300px;
    height: 400px;
    background-color: yellow;
    float: left;
    margin-left: -300px;
}

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

等高布局

1、等高布局就是子元素在父元素中保持的同等高度

// 结构
<div class="clearfix wrap">
<div class="left">
    第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列
    第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列

</div>
<div class="center">第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列</div>
<div class="right">第三列</div>

</div>

// 样式
*{
    margin: 0;
    padding: 0;
}
/* 清除浮动 */
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

/* 外部容器 */
.wrap{
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid lawngreen;
}
.left{
    float: left;
    width: 300px;
    background-color: red;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.center{
    float: left;
    width: 300px;
    background-color: blue;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.right{
    float: left;
    width: 300px;
    background-color: green;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

优点：结构简单，兼容所有浏览器

缺点：伪等高，需要合理的控制padding和margin的值

2、使用内容撑开

原理：利用内容撑开父元素的特点，给每一列添加相对应的容器，并进行相互嵌套，并在每个容器中添加背景色

注意：有多少列就需要有多少个容器，比如三列就需要三个容器

// 结构
<div class="wrap">
    <!-- 背景色一 -->
    <div class="bg1">
        <!-- 背景色二 -->
        <div class="bg2">
            <!-- 背景色三 -->
            <div class="clearfix bg3">
                <div class="left">
                    第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列
                    第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列
                </div>
                <div class="center">第二列</div>
                <div class="right">第三列</div>
            </div>
        </div>
    </div>
</div>
// 样式
* {
margin: 0;
padding: 0;
}

/* 清除浮动 */
.clearfix::after {
content: '';
display: block;
clear: both;
}

.wrap{
width: 960px;
margin: 0 auto;
overflow: hidden;
background-color: brown;
}
.bg1{
background-color: red;
width: 100%;
}
.bg2{
width: 100%;
background-color: blue;
position: relative;
left: 200px;
}
.bg3{
width: 100%;
background-color: green;
position: relative;
left: 560px;
}
.bg3 div{
min-height: 100px;
}
.left{
/* background-color: aqua; */
width: 200px;
float: left;
margin-left: -760px;
}
.center{
width: 560px;
float: left;
/* background-color: blueviolet; */
margin-left: -560px;
}
.right{
width: 200px;
float: left;
/* background: yellow; */
}