两栏布局、三栏布局

最新推荐文章于 2023-10-09 09:49:31 发布

@随性

最新推荐文章于 2023-10-09 09:49:31 发布

阅读量860

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/wqliuj/article/details/108268432

版权

一、两栏布局

两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。

方法一：单纯float

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .left{
                  width: 200px;
                  height: 600px;
                  background: green;
                  float: left;
                  display: table;
                  text-align: center;
                  line-height: 600px;
                  color: #fff;
                }

                .right{
                  margin-left: 210px;
                  height: 600px;
                  background: blue;
                  text-align: center;
                  line-height: 600px;
                }
        </style>
    </head>
    <body>
        <div class="left">定宽</div>
        <div class="right">自适应</div>
    </body>
</html>

在这里插入图片描述

方法二： float+BFC

注意：设置左盒子margin-right直接设置

原理：左侧元素浮动，右侧元素设为BFC，有间距设置浮动元素外边距即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
    overflow: auto;
    }
    .left {
    width: 120px;
    float:left;
    margin-right:20px;
    border: 5px solid #ddd;
    }
    .right {
    border: 5px solid #ddd;
    overflow:auto;
    }
    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>
</body>
</html>

方法三： flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    html,body{
        margin:0; //使内容达到浏览器的两端
        padding:0;
        background-color: antiquewhite;
        text-align:center;
        height:100%;
    }
    body{
        display:flex;
    }
    #left{
        background-color:yellow;
        flex:0 0 200px;
    }
    #right{
        background-color: chartreuse;
        flex:1 1 auto;
    }
</style>
<body>
    <div id="left">固定宽度</div>
    <div id="right">自适应</div>
</body>
</html>

二、三栏布局

三栏布局：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。

方法一：使用左右两栏使用float属性，中间栏使用margin属性进行撑开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .left{
                  width: 200px;height: 600px; background: red; float: left;    
                }
                .right{
                  width: 150px; height: 600px; background: green; float: right;
                }
                .middle{
                  height: 600px; background: yellow; margin-left: 220px; margin-right: 160px;
                }
        </style>
    </head>
    <body>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
        <div class="middle">中间栏</div>
    </body>
</html>

在这里插入图片描述
缺点是：1. 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确

方法二：使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .left{
            background: pink;
            width: 200px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .middle{
            height: 600px;
            margin: 0 220px;
            background: blue;
        }
        .right{
            height: 600px;
            width: 200px;
            position: absolute;
            top: 0;
            right: 0;
            background: yellow;
        }
        </style>
    </head>
    <body>
        <div class="left">左栏</div>
        <div class="middle">中间栏</div>
        <div class="right">右栏</div>
    </body>
</html>

好处是：html结构正常。
缺点是：当父元素有内外边距时，会导致中间栏的位置出现偏差。

方法三：使用float和BFC配合圣杯布局

将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .wrapper{
                overflow: hidden;  //清除浮动
            }
            .middle{
                width: 100%;
                float: left;
            }
            .middle .main{
                margin: 0 220px;
                background: pink;
            }
            .left{
                width: 200px;
                height: 300px;
                float: left;
                background: yellow;
                margin-left: -100%;
            }
            .right{
                width: 200px;
                height: 300px;
                float: left;
                background: grey;
                margin-left: -200px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="middle">
                <div class="main">中间</div>
            </div>
            <div class="left">
                左栏
            </div>
            <div class="right">
                右栏
            </div>
        </div>
    </body>
</html>

在这里插入图片描述
缺点是：1. 结构不正确 2. 多了一层标签。
——————————————————————————————————————————————————

方法四：flex布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .wrapper{
                display: flex;
            }
            .left{
                width: 200px;
                height: 600px;
                background: pink;
            }
            .middle{
                width: 100%;
                height: 600px;
                background: yellow;
                marign: 0 20px;
            }
            .right{
                width: 200px;
                height: 600px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">左栏</div>
            <div class="middle">中间</div>
            <div class="right">右栏</div>
        </div>
    </body>
</html>