内容简介:此方法的原理说将左右两侧进行定位,让其脱离文档流。 中心区域自然流动到它们下面,再为其设置margin值此方法页面元素结构可以顺序可以随意变动, 注意top值需要进行处理,不然可能会出现对不齐现象此方法的原理说将左右两侧进行float 浮动让其脱离文档流,中心部分处于正常文档流,再为其设置margin值
此方法的原理说将左右两侧进行定位,让其脱离文档流。 中心区域自然流动到它们下面,再为其设置margin值
此方法页面元素结构可以顺序可以随意变动, 注意top值需要进行处理,不然可能会出现对不齐现象
HTML
<div id='container'> <div class='left'>左侧</div> <div class='center'>中间</div> <div class='right'>右侧</div> </div> 复制代码
CSS
#container { position: relative; } .left, .right{ position: absolute; top: 0; width: 200px; min-height: 500px; background-color: red; } .left { left: 0; } .right { right: 0; } .center { margin: 0px 210px; min-height: 500px; background-color: yellow; } 复制代码
2、利用浮动和margin
此方法的原理说将左右两侧进行float 浮动让其脱离文档流,中心部分处于正常文档流,再为其设置margin值
此方法一定要将center中间部分放到最后,当窗口特别小时右侧会被挤下来
HTML
<div id='container'> <div class='left'>左侧</div> <div class='right'>右侧</div> <div class='center'>中间</div> </div> 复制代码
CSS
#container { position: relative; } .left, .right { width: 200px; min-height: 500px; background-color: red; } .left { float: left; } .right { float: right; } .center { min-height: 500px; margin: 0px 210px; background-color: yellow; } 复制代码
3、圣杯布局
此方法最常见,三者相互关联,最稳健。 首先需要将中间部分放再最前面,外面用一层容器包裹。外层容器让其占满整个屏幕100%, 左中右三者都float: left。 将center左右margin设置为两边容器的宽度加上边距,将left左侧margin-left设置为-100%,让其出现在最左侧,将right右侧margin-right设置为-200px,让其出现在最右侧。
HTML
<div id='container'> <div class='center_wrap'> <div class='center'>中间</div> </div> <div class='left'>左侧</div> <div class='right'>右侧</div> </div> 复制代码
CSS
#container { position: relative; } .center_wrap, .left, .right{ float: left; min-height: 500px; } .center_wrap { width: 100%; } .center_wrap .center{ min-height: 500px; margin: 0px 210px; background-color: yellow; } .left, .right { width: 200px; background-color: red; } .left { margin-left: -100%; } .right { margin-left: -200px; } 复制代码
4、CSS3 flex
HTML
<div id='container'> <div class='left'>左侧</div> <div class='center'>中间</div> <div class='right'>右侧</div> </div> 复制代码
CSS
#container { width: 100%; display: flex; } .left, .right { width: 200px; background-color: red; min-height: 500px; } .center { flex: 1; min-height: 500px; margin: 0 10px; background-color: yellow; } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何设计和实现自适应的负载均衡
- 赛题解析:如何设计和实现自适应的负载均衡
- [译]使用 JavaScript 和网络信息 API 实现自适应服务
- 巧用flex布局实现左侧文字溢出省略,右侧文字自适应。
- Android XML灵活布局之 EditText实现自适应高度同时限制最小和最大高度
- [2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Algorithms Unlocked
Thomas H. Cormen / The MIT Press / 2013-3-1 / USD 25.00
Have you ever wondered how your GPS can find the fastest way to your destination, selecting one route from seemingly countless possibilities in mere seconds? How your credit card account number is pro......一起来看看 《Algorithms Unlocked》 这本书的介绍吧!