关键词：
左右定中间自适应三列布局
1.绝对定位 2.浮动 3.flex
1 1.绝对定位 2 <!doctype html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>三栏布局</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #main { 13 margin: 0 300px; 14 height: 200px; 15 background: #00b7ef; 16 } 17 18 #left, 19 #right { 20 width: 300px; 21 height: 200px; 22 } 23 24 #left { 25 position: absolute; 26 top: 0; 27 left: 0; 28 background: #8fc41f; 29 } 30 31 #right { 32 position: absolute; 33 top: 0; 34 right: 0; 35 background: #fffaba; 36 } 37 </style> 38 </head> 39 40 <body> 41 <!-- 位置是left main right 位置可互换--> 42 <div id="left"> 43 </div> 44 <div id="right"> 45 </div> 46 <div id="main"> 47 </div> 48 </body> 49 50 </html>
1 2.浮动 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="utf-8" /> 7 <title> 三列左右固定宽度中间自适应</title> 8 <style> 9 body { 10 margin: 0; 11 padding: 0; 12 } 13 14 #left { 15 background-color: #E8F5FE; 16 height: 400px; 17 width: 100px; 18 float: left; 19 } 20 21 #center { 22 background-color: #F2FDDB; 23 height: 400px; 24 margin-right: 100px; 25 margin-left: 100px; 26 } 27 28 #right { 29 background-color: #FFE7F4; 30 height: 400px; 31 width: 100px; 32 float: right; 33 } 34 </style> 35 </head> 36 37 <body> 38 <!-- 必须是左右中三列顺序 如果是float--> 39 <div id="left">左列</div> 40 <div id="right">右列</div> 41 <div id="center">中列</div> 42 </body> 43 44 </html>
1 3. flex 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .three-coloum { 15 display: flex; 16 display: -webkit-flex; 17 width: 100%; 18 height: 500px; 19 } 20 21 .left { 22 background-color: red; 23 width: 200px; 24 /*height: 100px;*/ 25 } 26 27 .right { 28 background: blue; 29 width: 200px; 30 /*height: 100px;*/ 31 } 32 33 .main { 34 background: yellow; 35 flex: 1; 36 -webkit-box-flex: 1; 37 -moz-box-flex: 1; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="three-coloum"> 44 <div class="left">左</div> 45 <div class="main">中间</div> 46 <div class="right">右</div> 47 </div> 48 </body> 49 50 </html>
三列布局中，怎么设置左右固定，中间列自适应，且都显示在同一行。
左可以.left{width：200px;background:red;height:500px;position:absolute;left:0;top:0;}右可以.right{width:300px;height:500px;position:absolute;right:0;top:0;background:blue}中间可以.center{height:500px;background: 查看详情
布局-三列布局（定宽+自适应+定宽）
两侧定宽中间自适应方案一：float+margin+(fix)结构：1<divclass="parent">2<divclass="left"><p>left</p></div>3<divclass="center-fix">4<divclass="center">5<p>center</p> 查看详情
要布局左右两边定宽，中间自适应
最近在布局时，有一些问题，左右两边定宽，中间自适应，首先想到的就是左浮动和右浮动，但是在操作时还是会出现一些问题1.采用左边左浮动，右边右浮动，中间块用margin-left/margin-right<!DOCTYPEhtml><htmllang="en"><head>... 查看详情
css高度已知，左右定宽，中间自适应三栏布局
css高度已知，左右定宽，中间自适应三栏布局：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA 查看详情
左右定宽中间自适应布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.left{float:left;width:200px;height:200px;backgrou 查看详情
常见的布局实现，如弹性布局，两列、三列布局
参考技术A一列固定宽度，另一列自适应宽度如下图所示：第一列固定宽度200px，第二列自适应。边上两列固定宽度，中间自适应注意html的写法，左右两列，也就是1，3列应该写在一起，中间列写在最后效果同上 查看详情
三列自适应布局
分析了两列自适应布局的实现思路后，会觉得三列自适应布局的实现原理其实和他一模一样，不过是多了一个盒子而已。第一类，浮动在前：<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法... 查看详情
两列布局（一列定宽，一列自适应）
用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动登高）1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<styletype="text/css"> 查看详情
三列布局_左右固定_中间自适应
...ml><html> <head> <metacharset="utf-8"> <title>三列布局_左右固定_中间自适应</title> <style& 查看详情
三栏布局，div左右盒子是定宽，中间是自适应
用弹性布局flex:给父盒子加个display:flex;给中间盒子设flex=1;/*弹性盒子布局*/.wrap{width:100%;height:90px;display:flex;}.left{width:300px;height:90px;background-color:red;float:left;}.content{flex:1;height:90px;background-col 查看详情
布局-两列布局（一列定宽，一列自适应）
结构：1<divclass="parent">2<divclass="left">3<p>left</p>4</div>5<divclass="right">6<p>right</p>7<p>right</p>8</div>9</div>样式：1.解决方案 查看详情
使用css实现三栏自适应布局（两边宽度固定，中间自适应）
...p://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，... 查看详情
三列自适应布局
第一类，浮动在前：<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法一：float+margin.main{margin-left:150px;margin-right:100px;}.left{float:left;width:15 查看详情
css两列自适应布局的4种思路
前面的话 前面已经介绍过css两列布局中单列定宽单列自适应布局的6种思路的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思... 查看详情
（转转转）使用css实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于CSS3新特性弹性盒模型布局实现。 1.基... 查看详情
页面布局假设高度已知，写出三栏布局，左右栏定宽，中间自适应。
*margin:0;padding:0//Reset（重置）浏览器默认样式【利：可以简单方便的一次性重置所有HTML网页元素的浏览器样式，代码少，控制量大。--弊：因为它重置了所有元素的样式，包括不需要重置的样式，例如table,我们不需要去重置table... 查看详情
特殊的三列布局-左右两列宽度固定，中间自适应
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情
前端布局模型
圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由... 查看详情