三栏布局（一）-------左右宽高固定，中间自适应

Aldous 发布于2019-04-23 13:08 / 1037人阅读

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方

常见的页面布局有

1、左右宽度固定，中间自适应；

2、上下高度固定，中间自适应；

3、左宽度固定，右自适应；

4、上高度固定，下自适应，

下边是我看过网上的视频后写出来的三栏布局-左右宽高固定，中间自适应；

有5种布局方式：float; position; flex; table; grid;

  1 DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>左中右三栏布局title>
  5     <style type="text/css">
  6         html * {
  7             padding: 0;
  8             margin: 0;
  9         }
 10         .layout{
 11             width: 100%;
 12             margin-top: 15px;
 13         }
 14         .layout .three_columns > div{
 15             min-height: 150px;
 16             text-align: center;
 17         }
 18         .layout .three_columns > div.center > p{
 19             margin-top: 15px;
 20         }
 21     style>
 22 head>
 23 <body>
 24     
 25     <section class="layout float">
 26         <style type="text/css">
 27             .layout.float .left{
 28                 float: left;
 29                 width: 300px;
 30                 background: #90D9F7;
 31             }
 32             .layout.float .right{
 33                 float: right;
 34                 width: 300px;
 35                 background: #F5DE25;
 36             }
 37             .layout.float .center{
 38                 background: pink;
 39             }
 40         style>
 41         <article class="three_columns">
 42             <div class="left">div>
 43             <div class="right">div>
 44             <div class="center">
 45                 <h1>三栏布局float布局h1>
 46                 <p>优点：兼容性比较好
 47                    缺点：脱离文档流，清除浮动，处理与周边元素布局
 48                 p>
 49                 <p>去掉高度后,内容会超出容器p>
 50             div>
 51         article>
 52     section>
 53 
 54     
 55     <section class="layout position">
 56         <style type="text/css">
 57             .layout.position .left{
 58                 position: absolute;
 59                 left: 0;
 60                 width: 300px;
 61                 background: #90D9F7;
 62             }
 63             .layout.position .center{
 64                 position: absolute;
 65                 left: 300px;
 66                 right: 300px;
 67                 background: pink;
 68             }
 69             .layout.position .right{
 70                 position: absolute;
 71                 right: 0;
 72                 width: 300px;
 73                 background: #F5DE25;
 74             }
 75         style>
 76         <srticle class="three_columns">
 77             <div class="left">div>
 78             <div class="center">
 79                 <h1>三栏布局position布局h1>
 80                 <p>优点：快速布局
 81                    缺点：脱离文档流，可使用性差
 82                 p>
 83                 <p>去掉高度后,内容会超出容器p>
 84             div>
 85             <div class="right">div>
 86         srticle>
 87     section>
 88 
 89     
 90     <section class="layout flexbox">
 91         <style type="text/css">
 92             .layout.flexbox{
 93                 margin-top: 180px;
 94             }
 95             .layout.flexbox .three_columns{
 96                 display: flex;
 97             }
 98             .layout.flexbox .left{
 99                 width:300px;
100                 background: #90D9F7;
101             }
102             .layout.flexbox .center{
103                 flex: 1;
104                 background: pink;
105             }
106             .layout.flexbox .right{
107                 width: 300px;
108                 background: #F5DE25;
109             }
110         style>
111         <article class="three_columns">
112             <div class="left">div>
113             <div class="center">
114                 <h1>三栏布局flex布局h1>
115                 <p>解决上两种方案的缺陷，最好用的布局
116                 p>
117                 <p>去掉高度后,容器会被内容撑开，还可以使用p>
118             div>
119             <div class="right">div>
120         article>
121     section>
122 
123     
124     <section class="layout table">
125         <style type="text/css">
126             .layout.table .three_columns{
127                 display: table;
128                 width: 100%;
129                 height: 150px;
130             }
131             .layout.table .three_columns>div{
132                 display: table-cell;
133             }
134             .layout.table .left{
135                 width: 300px;
136                 background: #90D9F7;
137             }
138             .layout.table .center{
139                 background: pink;
140             }
141             .layout.table .right{
142                 width: 300px;
143                 background: #F5DE25;
144             }
145         style>
146         <article class="three_columns">
147             <div class="left">div>
148             <div class="center">
149                 <h1>三栏布局table布局h1>
150                 <p>
151                     优点：兼容性是最好的
152                     缺点：不好控制、当其中一个高度变，其他的高度也会变
153                 p>
154                 <p>去掉高度后,容器会被内容撑开，还可以使用p>
155             div>
156             <div class="right">div>
157         article>
158     section>
159 
160     
161     <section class="layout grid">
162         <style type="text/css">
163             .layout.grid .three_columns{
164                 width: 100%;
165                 display: grid;
166                 grid-template-rows: 150px;
167                 grid-template-columns: 300px auto 300px;
168             }
169             .layout.grid .left{
170                 background: #90D9F7; 
171             }
172             .layout.grid .center{
173                 background: pink;
174             }
175             .layout.grid .right{
176                 background: #F5DE25;
177             }
178         style>
179         <article class="three_columns">
180             <div class="left">div>
181             <div class="center">
182                 <h1>三栏布局grid布局h1>
183                 <p>
184                     优点：兼容性是最好的
185                     缺点：不好控制、当其中一个高度变，其他的高度也会变
186                 p>
187                 <p>去掉高度后,内容会超出容器p>
188             div>
189             <div class="right">div>
190         article>
191     section>
192 body>
193 html>

下图是我的代码的运行结果：

我在上边总结了一下每种布局的优缺点，以及去掉高度后哪种布局还可以使用，如果各位有觉得不对的地方，欢迎大家帮我纠正！

-ＴＨＥ　ＥＮＤ-

GPU云服务器云服务器 html5宽高自适应三栏布局 html5 三栏布局固定宽高

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1482.html

三栏布局（二）-------上下宽高固定，中间自适应

摘要：上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有种布局方式话不多说，直接上代码。上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有4种布局方式： position; flex; table; grid; 话不多说，直接上代码。 DOCTYPE html> ...

Render 2019-04-23 13:08 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

isaced 2019-08-29 14:21 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
两种方式实现CSS双飞翼布局

摘要：双飞翼布局，就是两端固定宽高，中间自适应的三栏布局先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应方式一通过弹性布局来实现看代码结构，是中间的自适应区域先简单粗暴的解决一下浏览器的默认样式使用，盒模型好计算，妈妈再双飞翼布局，就是两端固定宽高，中间自适应的三栏布局先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 showImg(https:/...

ghnor 2019-08-01 17:17 评论0 收藏0