三栏布局

Posted 2021-03-04 strongerpian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局相关的知识，希望对你有一定的参考价值。

横向布局

技术图片

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>1</title>
 6         <style type="text/css">
 7             *{margin:0;padding: 0;}
 8             body{
 9                 display: flex;
10             }
11             .box1,.box3{
12                 width: 200px;
13                 height: 300px;
14                 background: red;
15             }
16             .box2{
17                 height: 400px;
18                 background: orange;
19                 flex: 1;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="box1">1</div>
25         <div class="box2">2</div>
26         <div class="box3">3</div>
27     </body>
28 </html>

垂直布局

技术图片

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>2</title>
 6         <style type="text/css">
 7             *{margin: 0;padding: 0;}
 8             html,body{
 9                 height: 100%;
10             }
11             body{
12                 display: flex;
13                 flex-direction: column;
14                 justify-content: space-between;
15             }
16             .box1,.box3{
17                 height: 50px;
18                 background: red;
19             }
20             .box2{
21                 background: orange;
22                 flex: 1;
23             }
24         </style>
25     </head>
26     <body>
27         <div class="box1">1</div>
28         <div class="box2">2</div>
29         <div class="box3">3</div>
30     </body>
31 </html>

以上是关于三栏布局的主要内容，如果未能解决你的问题，请参考以下文章