经典布局（flex和传统两种实现）—左右页眉页脚

最新推荐文章于 2025-05-05 15:50:28 发布

jiaojsun

最新推荐文章于 2025-05-05 15:50:28 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/92984217

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

5 篇文章

订阅专栏

博客介绍了两种布局方法。浮动法中，上中下为块元素需定宽高，中间部分左右浮动且定宽高，代码编写较繁琐；flex方法里，上中下只需设置宽高会依次向下排列，中间部分使用display:flex，左右通过flex属性设置宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.浮动法

上中下：都是块元素。定宽，定高

中：定宽高：左右：浮动且定宽高

这种方式其实并不好，写了好多代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          width: 900px;
          margin: 0 auto;
        }
        #header{
          height: 100px;
          background: blueviolet
        }
        #main{
          height: 500px;/* 父级设置宽高也是一种清浮动的方式 */
          border: 1px solid red;
        }
        #footer{
          height: 150px;
          background: blueviolet
        }

        #left{
          float: left;
          width: 200px;
          height: 500px;
          background: greenyellow;
        }
        #right{
          float: left;
          width: 700px;
          height: 500px;
          background: orange;
        }
    </style>
</head>
<body>
<header id="header" class="wrap"></header>
<section id="main" class="wrap">
  <aside id="left"></aside>
  <div id="right"></div>
</section>
<footer id="footer" class="wrap"></footer>


</body>
</html>

2. flex方法

上中下：因为都是块元素，所以只需要设置宽高，就会依次向下排列

中:display:flex; 左:flex:0 0 200px; 右：flex：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          width: 900px;
          margin: 0 auto;
        }
        #header{
          background: #66ccff;
          height: 100px;
        }
        #main{
          background: #ffcccc;
          height: 500px;
          display: flex;
        }
        #footer{
          background: #99ccff;
          height: 150px;
        }

        #left{
          background: #ccffff;
          flex: 0 0 200px;
        }
        #right{
          background: #7cd677;
          flex: 1
        }
    </style>
</head>
<body>

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

</body>
</html>