几种常见的CSS列布局
2016-07-20 15:02
691 查看
两侧右列自适应
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ width: 200px; float: left; background-color: gray; } .right{ float: right; width: 100%; margin-left: -200px; } .inner{ background-color: blue; margin-left: 200px; } </style> </head> <body> <div> <div class="left">Left</div> <div class="right"> <div class="inner">Right</div> </div> </div> </body> </html>
两列左侧自适应
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ width: 100%; float: left; margin-right: -200px; } .right{ width: 200px; float: right; margin-left: -200px; background-color: green; } .inner{ margin-right: 200px; background-color: blue; } </style> </head> <body> <div> <div class="left"> <div class="inner">Left</div> </div> <div class="right">Right</div> </div> </body> </html>
两列定宽布局
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ float: left; width: 400px; background-color: blue; } .right{ float: left; width: 500px; background-color: green; } </style> </head> <body> <div> <div class="left">Left</div> <div class="right">Right</div> </div> </body> </html>
三列中间自适应布局
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ float: left; width: 200px; margin-right: -200px; background-color: blue; } .middle{ float: left; width: 100%;} .inner{ background-color: gray; margin-left: 200px; margin-right: 200px; } .right{ float: right; width: 200px; margin-left: -200px; background-color: green; } </style> </head> <body> <div> <div class="left">Left</div> <div class="middle"> <div class="inner">Middle</div> </div> <div class="right">Right</div> </div> </body> </html>
三列左侧自适应布局
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ width: 100%; float: left; } .inner{ margin-right: 400px; background-color: blue; } .out{ width: 400px; margin-left: -400px; float: left; } .middle{ width: 200px; float: left; background-color: gray; } .right{ width: 200px; float: left; background-color: green; } </style> </head> <body> <div> <div class="left"> <div class="inner">Left</div> </div> <div class="out"> <div class="middle">Middle</div> <div class="right">Right</div> </div> </div> </body> </html>
三列右侧自适应布局
<!DOCTYPE html> <html> <head> <title>Layout</title> <style type="text/css"> div{ height: 300px; } .left{ width: 200px; float: left; background-color: blue; } .middle{ width: 200px; float: left; background-color: gray; } .right{ width: 100%; float: right; margin-left: -400px; } .inner{ margin-left: 400px; background-color: green; } </style> </head> <body> <div> <div class="left">Left</div> <div class="middle">Middle</div> <div class="right"> <div class="inner">Right</div> </div> </div> </body> </html>
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的