经典布局（flex和传统两种实现）—左中右三栏式

最新推荐文章于 2023-04-12 00:24:31 发布

jiaojsun

最新推荐文章于 2023-04-12 00:24:31 发布

阅读量2.1k

点赞数

分类专栏：经典布局（flex和传统两种实现）

本文链接：https://blog.csdn.net/jiaojsun/article/details/92991036

版权

经典布局（flex和传统两种实现）专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.浮动法

父级宽度：80%

左右：定宽高, 分别浮动向左，浮动向右

中: margin: 0 200px; 定高

注意，中间的块元素必须放在后面

左右定宽，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          width: 80%;
          margin: 0 auto;
        }
        #left{
          background: #ccffff;
          float: left;
          width: 200px;
          height: 500px;
        }
        #right{
          background: #ccffff;
          float: right;
          width: 200px;
          height: 500px;
        }
        #main{
          background: #ffcccc;
          margin:0 200px;
          height: 500px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <aside id="right"></aside>
    <section id="main"></section>
</div>

</body>
</html>

2.flex法

父级：宽度百分比。定高，flex布局

左右： flex：0 0 200px;

中： flex：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          margin: 0 auto;
          width: 80%;
          height: 500px;
          display: flex;
        }
        #left{
          background: #ccffff;
          flex: 0 0 200px;
        }
        #right{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #main{
          background: #ffcccc;
          flex: 1;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <section id="main"></section>
    <aside id="right"></aside>
</div>

</body>
</html>

3.双飞翼布局

其实也就是左中右三栏式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            margin:0 auto;
            width:80%
        }
        #main{
            width:100%;
            float: left;
            background: #ffcccc;
        }
        #left{
            width:200px;
            float: left;
            height:500px;
            background: #ccffff;
            margin-left: -100%;
        }
        #right{
            width:200px;
            float: left;
            height:500px;
            background: #ccffff;
            margin-left:-200px;
        }
        .content{
            height:500px;
            margin:0 200px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <section id="main">
        <div class="content">#content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>

</body>
</html>

题外话，这也是我遇到的一个面试题，上下定高，中间自适应怎么做

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          margin: 0 auto;
          width: 80%;
          height: 100vh; //重点
          display: flex;
          flex-direction: column;
        }
        #left{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #right{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #main{
          background: #ffcccc;
          flex: 1;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <section id="main"></section>
    <aside id="right"></aside>
</div>

</body>
</html>

上面虽然实现了需求，但是假如让上下的位置保持不变，怎么弄？

jiaojsun

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
经典布局（flex和传统两种实现）—左中右三栏式

1.浮动法父级宽度：80%左右：定宽高, 分别浮动向左，浮动向右中: margin: 0 200px; 定高注意，中间的块元素必须放在后面左右定宽，中间自适应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫

专栏目录