CSS实现三列布局

Channe 发布于2019-04-23 13:17 / 1909人阅读

三列布局指的是两边两列定宽，中间的宽度自适应。

常用三种方法：

定位
浮动
弹性盒布局

定位方式

最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位方法创建三列布局title>
 6     <style>
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     .left{
12         width: 200px;
13         height: 500px;
14         background-color: yellow;
16         position: absolute; /* 绝对定位，使位置固定 */
17         left: 0;
18         top: 0;
19     }
20     .center{
21         height: 600px;
22         background-color: purple;
23         margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */
24     }
25     .right{
26         width: 300px;
27         height: 500px;
28         background-color: red;
30         position: absolute; /* 绝对定位，使位置固定 */
31         right: 0;
32         top: 0;
33     }
34 
35     style>
36 head>
37 <body>
38     <div class="left">Leftdiv>
39     <div class="center">Centerdiv>
40     <div class="right">Rightdiv>
41 body>
42 html>

结果

浮动方法

让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动法创建三列布局title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .left{
12         width: 200px;
13         height: 500px;
14         background-color: yellow;
15         float: left;
16     }
17     .center{
18         height: 600px;
19         background-color: purple;
20         margin: 0 300px 0 200px;
21         min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
22     }
23     .right{
24         width: 300px;
25         height: 500px;
26         background-color: red;
27         float: right;
28     }
29     style>
30 head>
31 <body>
32     <div class="left">Leftdiv>
33     <div class="right">Rightdiv>
34     <div class="center">Centerdiv>  
35 body>
36 html>

弹性盒布局

使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹性盒子创建三列布局title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             display: flex;
13         }
14         .left{
15         width: 200px;
16         height: 500px;
17         background-color: yellow;
18     }
19     .center{
20         height: 600px;
21         flex: 1;
22         background-color: purple;
23     }
24     .right{
25         width: 300px;
26         height: 500px;
27         background-color: red;
28     }
29     style>
30 head>
31 <body>
32     <div class="container">
33         <div class="left">Leftdiv>
34         <div class="center">Centerdiv>  
35         <div class="right">Rightdiv>
36     div>
37 body>
38 html>

超融合服务器服务器托管 extjs三列式布局 css布局 css布局教程学习css布局

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

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

css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

liangzai_cool 2019-08-29 11:00 评论0 收藏0
css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

phodal 2019-08-01 15:30 评论0 收藏0
css常见的各种布局下----三列布局

css 三列布局，左右固定宽度右边自适应　　1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局　　　　　1.1.1 自适应部分一定要放第一个位子，使用浮动，并且设置宽度为100%，不设置浮动元素内容不够称不开整个宽度　　　　　1.1.2 左右固定部位，使用margin-left :负数，使其左右靠齐　　　　　1.1.3 中间自适应部分嵌套一个div，设置m...

番茄西红柿 2019-04-23 10:21 评论0 收藏0
css常见的各种布局下----三列布局

摘要：三列布局，左右固定宽度右边自适应不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局自适应部分一定要放第一个位子，使用浮动，并且设置宽度为，不设置浮动元素内容不够称不开整个宽度左右固定部位，使用负数，使其左右靠齐中间自适应部分嵌套一css 三列布局，左右固定宽度右边自适应 1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子，使...

tigerZH 2019-04-22 17:02 评论0 收藏0
css常见的各种布局下----三列布局

摘要：三列布局，左右固定宽度右边自适应不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局自适应部分一定要放第一个位子，使用浮动，并且设置宽度为，不设置浮动元素内容不够称不开整个宽度左右固定部位，使用负数，使其左右靠齐中间自适应部分嵌套一css 三列布局，左右固定宽度右边自适应 1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子，使...

mingde 2019-04-22 16:34 评论0 收藏0