zoukankan      html  css  js  c++  java
  • div+css布局使用inline-block

    参考自:http://zhidao.baidu.com/link?url=xtKe0RtLKDa1TZGais49zDuAaja1yGGZVV9zd9qJENV7HrRnd6lls90SW7EQXA3e0tZY3MHLeGiTSQdKHYMrHK

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>测试</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
    <div class="h">顶部层</div>
    <div class="nav">导航栏</div>
    <div class="l">广告层</div>
    <div class="m">页面主体</div>
    <div class="r">广告层</div>
    <div class="b">底部层</div>
    </body>
    </html>

    css.css 内容如下:

    html, body { height:100%; padding:0px; margin:0px; }
    .h, .nav, .l, .m, .r, .b { text-align:center; font-size:14px; border:1px solid #000000; margin:-1px;}
    .h { height:10%;}
    .nav { height:5%; background-color:#5C69C2;}
    .l { float:left; 20%; height:70%; }
    .r { float:right; 20%; height:70%; }
    .m { float:left; 60%; height:70%;}
    .b { clear:both; height:10%; }




    改动后使用inline-block布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <style type="text/css">
    html, body { height:100%; padding:0px; margin:0px; font-size: 0;}
    .h, .nav, .l, .m, .r, .b { text-align:center; font-size:14px; }
    .h { height:10%;}
    .nav { height:5%; background-color:#5C69C2;}
    .l { 20%; height:70%; display: inline-block;}
    .r { 20%; height:70%; display: inline-block;}
    .m { 60%; height:70%;display: inline-block;}
    .b { clear:both; height:10%; }
    .h div,.nav div,.l div,.m div,.r div,.b div{
    border-top:1px solid #000;
    height: 100%;
    }
    .h div:first-child{
    border:none;
    }
    </style>
    </head>
    <body>
    <div class="h"><div>顶部层</div></div>
    <div class="nav"><div>导航栏</div></div>
    <div class="l"><div>广告层</div></div>
    <div class="m"><div>页面主体</div></div>
    <div class="r"><div>广告层</div></div>
    <div class="b"><div>底部层</div></div>
    </body>
    </html>

  • 相关阅读:
    简单字符串处理应避免使用正则表达式
    提高正则表达式的可读性
    用零宽度断言匹配字符串中的特定位置
    避免不必要的回溯
    预编译正则表达式
    用Text::CSV_XS模块处理csv文件
    Ack 类似grep一样的查找
    Apache压力测试
    仅编译正则表达式一次
    排序上下箭头的是实现
  • 原文地址:https://www.cnblogs.com/puweibuqi/p/4818193.html
Copyright © 2011-2022 走看看