【CSS布局】三栏式布局,左右定宽,中间内容区域自适应
2017-08-19 10:48
656 查看
实现三栏式布局的经典方法有:双飞翼布局、圣杯布局,两者都是利用了父margin来达到想要的效果,同时也是遵循重要的内容优先加载的原则(先加载center),只是在实现上稍微有些不同,同时利用CSS3的flex布局也可以实现以上效果。下面介绍下具体的实现方法:
(1)圣杯布局
原理:三个部分均被一个div元素进行包裹,同时优先加载center,利用float使元素进行浮动,其中的主要点就是利用父级div的padding+子元素的负的margin以及定位来实现效果的
(2)双飞翼布局
原理:首先布局上与圣杯布局有所不一样,双飞翼布局中的三个模块并没有直接包裹在同一个div内,而是center被包裹在一个div内,还是要将元素进行float的定位,然后利用center元素的margin+Left等的负margin实现效果,因为没有使用padding使得Left、right元素不需要进行定位,双飞翼布局实现上比圣杯布局简单。
以上两种布局方式在实现上都神似,止于差别机智的你可以下来自己仔细琢磨下,哈哈哈
(3)flex布局
原理:flex弹性布局的详细介绍后面会出一篇博客,flex弹性布局中要是利用了其自身的一些属性,相比其他的方式而言,flex的方式会更加简洁,利用order调整元素的放置位置,Left、right的宽度固定,不用设置flex的值,只有center的值是随机变化的所以需要设置flex:1 1 width,其相当于三个属性的组合属性:flex-grow、flex-shrink、flex-basis。
(1)圣杯布局
原理:三个部分均被一个div元素进行包裹,同时优先加载center,利用float使元素进行浮动,其中的主要点就是利用父级div的padding+子元素的负的margin以及定位来实现效果的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局</title> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;}/*防止*/ .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .left, .middle, .right{ position: relative;/*圣杯布局中主要利用的是定位加margin*/ float: left; min-height: 130px; } .container{ padding:0 220px 0 200px; overflow: hidden;/*BFC,float的元素的高度也可以将元素的高度撑起来*/ } .left{ margin-left: -100%;/*利用margin将元素提升到上一行中*/ left: -200px;/*利用Left定位将元素当知道指定的位置*/ width: 200px; background: red; } .right{ margin-left: -220px; right: -220px; width: 220px; background: green; } .middle{ width: 100%; background: blue; word-break: break-all; } .footer{ clear: both; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="container"><!--三个div子标签全都包裹在该容器中--> <div class="middle"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
(2)双飞翼布局
原理:首先布局上与圣杯布局有所不一样,双飞翼布局中的三个模块并没有直接包裹在同一个div内,而是center被包裹在一个div内,还是要将元素进行float的定位,然后利用center元素的margin+Left等的负margin实现效果,因为没有使用padding使得Left、right元素不需要进行定位,双飞翼布局实现上比圣杯布局简单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>双飞翼布局</title> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub{ margin-left: -100%; width: 200px; background: red; } .extra{ margin-left: -220px; width: 220px; background: blue; } .main{ width: 100%; } .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 130px; background: green; word-break: break-all; } .footer{ clear: both; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="main"><!--布局上与圣杯布局不一样,该div没有包裹所有的div标签--> <div class="main-inner"> <h4>main</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> </div> <div class="sub"> <h4>sub</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="extra"> <h4>extra</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
以上两种布局方式在实现上都神似,止于差别机智的你可以下来自己仔细琢磨下,哈哈哈
(3)flex布局
原理:flex弹性布局的详细介绍后面会出一篇博客,flex弹性布局中要是利用了其自身的一些属性,相比其他的方式而言,flex的方式会更加简洁,利用order调整元素的放置位置,Left、right的宽度固定,不用设置flex的值,只有center的值是随机变化的所以需要设置flex:1 1 width,其相当于三个属性的组合属性:flex-grow、flex-shrink、flex-basis。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex三栏式布局</title> <style type="text/css"> .container{ display:flex; } .center{ flex: 1 1 300px; order:2; background:blue; } .left{ width:220px; background:green; order:1; } .right{ width:220px; background: #f00; order:3; } </style> </head> <body> <div class="container"> <div class="center"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> </div> </body> </html>
相关文章推荐
- [css]布局 三栏式布局,左右定宽,中间内容区域自适应
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- css布局左右定宽,中间自适应
- 使用jquery进行三栏式布局,左右定宽,中间自适应 代码
- DIV+CSS经典??三列布局(左右固定 中间自适应)
- 自适应布局,完美解决左右两边固定大小,中间内容适应大小。
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- css实现三列布局,左右固定值,中间自适应。
- CSS---左右固定,中间自适应布局
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- CSS布局:三栏布局,中间栏固定宽度,左右两边自适应
- CSS布局 -- 左右定宽,中间自适应
- 左右两列自适应中间列内容即随中间内容高度自适应的布局
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- CSS三列布局之左右宽度固定,中间元素自适应问题
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- 左右侧固定,中间自适应布局和 左侧固定,右侧自适应布局