标签:meta body style oat osi auto blog 测试 com
在网页布局中,以前只考虑了两列、三列的布局方式,但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况;今天遇到这个问题,在这里mark一下;
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{margin-left: 300px;background: blue;height: 150px;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{background: yellow;height: 150px;overflow: auto;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box{display: table;width: 100%;} .box1{width: 300px;height: 150px;background: red;display: table-cell;} .box2{background: green;height: 150px;display: table-cell;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
标签:meta body style oat osi auto blog 测试 com
原文地址:http://www.cnblogs.com/victor5230/p/6088220.html