布局解决方案
2016-02-13 10:46
302 查看
两列布局
一列定宽,另一列自适应直接上代码一看就懂
<style > .left { float: left; width: 100px; } .right { margin-left: 120px; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> </div> </div>
不兼容ie6
更加完美的方案
.left { float: left; width: 100px; position: relative; } .right-fix { float: right; width: 100%; margin-left: -100%; } .right { margin-left: 120px; } <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
2.float+overflow:hidden
这里用的overflow会触发一个叫做bfc模式,就是块级格式化上下文,这就会把这个盒子和外界隔离开来,不会让其他浮动影响到自己,(http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html)
仔细看清楚浮动和bfc可以看这篇文章。
.left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; } <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
3.使用table
<style > .parent { display: table; width: 100%; } .left, .right { display: table-cell; table-layout: fixed; } .right { overflow: hidden; } .left { width: 100px; padding-right: 20px; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div>
4.使用flex
<style > .parent { display: flex; } .left { width: 100px; margin-right: 20px; } .right { flex: 1; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
flex是根据内容来进行调整,所以对性能有影响,所以只能做小范围的布局。
多列顶宽,一列自使用
还是上面的思路<style > .left, .center { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="center">center</div> <div class="right"> <p>right</p> <p>right</p> </div>
上面这些就是做个演示,看清楚思路就行,具体效果需要靠实际项目实现
一列不定宽,一列自适应
1.使用float+overflow<style > .left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
ie6不可以
2.使用table
<style > .parent { display: table; width: 100%; } .left, .right { display: table-cell; } .left { width: 0.1%; padding-right: 20px; } .left p { width: 200px; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
3.使用flex
<style > .parent { display: flex; } .left { width: 200px; margin-right: 20px; } .right { flex: 1; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
在更多列的布局中,还是使用float就可以把第二列设置成第一列同样的样式。
多列等宽布局
1。仔细看这幅图片这个公式
得到下面这个代码
<style > .parent { margin-left: -20px; } .column { float: left; width: 25%; padding-left: 20px; /*使widht包含padding*/ box-sizing: border-box; } </style> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> <div class="column"><p>5</p></div> </div>
2.使用table布局
<style > .parent-fix { margin-left: -20px; } .parent { display: table; width: 100%; /*布局优先*/ table-layout: fixed; } .column { display: table-cell; padding-left: 20px; } </style> <div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> <div class="column"><p>5</p></div> </div> </div>
3.使用flex
<style > .parent { display: flex; } .column { flex: 1; } .column+.column { margin-left: 20px; } </style> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> <div class="column"><p>5</p></div> </div>
等高布局
1.使用table<style > .parent { display: table; width: 100%; table-layout: fixed; } .left, .right { display: table-cell; } .left { width: 100px; padding-right: 20px; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
2.使用flex
<style > .parent { display: flex; } .left { width: 100px; margin-right: 20px; } .right { /*有一个天然的拉伸效果*/ flex: 1; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
3.使用float
<style > .parent { /*把子元素截取到需要的高度*/ overflow: hidden; } .left, .right { /*为了让padding内的也有颜色,并且把9999抵消掉*/ padding-bottom: 9999px; margin-bottom: -9999px; } .left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; } </style> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
兼容性较好,但是不是真正的等高,是伪登高,只是让他的背景看起来登高,并且做了截取。
全屏布局
1.使用position布局先看效果图
下面是实现代码:
<style > html, body, .parent { height: 100%; /*不让出现滚动条*/ overflow: hidden; } .top { position: absolute; left: 0; right: 0; top:0; height: 100px; border: 1px solid red; } .left { position: absolute; left: 0; top: 100px; bottom: 50px; width: 200px; border: 1px solid red; } .right { position: absolute; /*出现滚动条*/ overflow: auto; left: 200px; right: 0; top: 100px; bottom: 50px; border: 1px solid red; } .bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; border: 1px solid red; } .inner { /*出现滚动条*/ min-height: 1000px; } <div class="parent"> <div class="top">top</div> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> <div class="bottom">bottom</div> </div>
2.使用flex布局
<style > html, body, .parent { height: 100%; overflow: hidden; } .parent { display: flex; flex-direction: column; border: 1px solid red; } .top { height: 100px; border: 1px solid red; } .midden { flex: 1; display: flex; border: 1px solid red; } .bottom { height: 50px; border: 1px solid red; } .left { width: 200px; border: 1px solid red; } .right { flex: 1; overflow: auto; border: 1px solid red; } .inner { min-height: 1000px; } </style> <div class="parent"> <div class="top">top</div> <div class="midden"> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> </div> <div class="bottom">bottom</div> </div>
以上的两种方案,就是实现定宽和定高的实现方案。如过是不定宽和不定高的话,只要把相应的值改为百分比就可以了。
还有一种是全部都自适应的情况
采用position是无法做到的因为top的值会随时影响其他的值,那么就只有使用flex解决了。
使用flex就只需要把定宽和定高的地方去掉就可以了
<style > html, body, .parent { height: 100%; overflow: hidden; } .parent { display: flex; flex-direction: column; border: 1px solid red; } .top { border: 1px solid red; } .midden { flex: 1; display: flex; border: 1px solid red; } .bottom { border: 1px solid red; } .left { border: 1px solid red; } .right { flex: 1; overflow: auto; border: 1px solid red; } .inner { min-height: 1000px; } </style> <div class="parent"> <div class="top">top</div> <div class="midden"> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> </div> <div class="bottom">bottom</div> </div>
讲了这么多,总结起来,布局就是靠float和position和table加上很强大的flex但是性能和兼容是个问题,载加上相应的html结构就可以实现我们想要的任何布局了,并且要学会分解问题,这才是最重要的。
相关文章推荐
- Android Native 绘图方法
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- Patrol 7 架构下?的处理方法
- 中病毒后常用的解决方法病毒终极解决方案
- 样式表CSS布局经验
- C#中struct和class的区别详解
- QQ尾巴 InfoMs.Ime 解决方案
- VBS ArrayList Class vbs中的数组类
- IE对CSS样式表的限制分析与解决方案
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- 大家看了就明白了css样式中类class与标识id选择符的区别小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- 开源MySQL高效数据仓库解决方案:Infobright详细介绍
- Android编程之代码创建布局实例分析
- CSS顶级技巧大放送,div+css布局必知
- 深入了解PHP类Class的概念
- jquery 表单验证之通过 class验证表单不为空