zoukankan      html  css  js  c++  java
  • 用DIV建左右自动伸缩型布局

    要求:

    1.跟随窗体的大小改变,右侧内容自动伸缩.

    2.用表格填允右侧内容时,当表格100%时,不可换行.

    3.不可隐藏右侧中的内容.

    布局CSS如下:

    .main{ float:right; margin-right:-200px; 100%; height:300px; background-color:#ff0000;}
    .navbar{ float:left; 200px; height:300px; background-color:#00ff00;}
    .content{ margin-right:200px; background-color:#0000ff;}
    

    页内容如下:

    <div class="main">
    <div class="content">
    <table style="100%;">
    <tr>
    <td> </td>
    </tr>
    </table>
    </div>
    </div>
    <div class="navbar"></div>
    

    在IE8下有更好的方法:

    .navbar{float:left; 150px; background-color:#00ff00; height:50px; border:solid 1px #000;}
    .main{background-color:#0000ff;height:50px;border:solid 1px #000; margin-left:155px}
    

    解决IE6下不兼容问题:

    .navbar{float:left;position:absoult;left:0px;top:0px;150px;height:50px;}

    页内容:

    <div class="navbar"></div>
    <div class="main">
    <table style="100%">
    <tr>
    <td>
    </td>
    </tr>
    <table>
    <div>
    

    就上面的网页还有如下方法:

    .navbar{float:left;150px;height:50px;}

    .main{overflow:hidden;zoom:1;height:50px;}

    对于以上方法中,IE6下产生的3px bug问题,可按如下方法觖:

    第一种方法:

    .navbar{margin-right:-3px;}/*IE8/FF不能用*/

    第二种方法:

    .main{float:left;}

    朋友们如有更好的排版方法,望赐教

  • 相关阅读:
    线程同步总结
    Map,HashMap,LinkedHashMap,TreeMap比较和理解
    实现自定义注解
    SSM框架中写sql在dao文件中以注解的方式
    SSM框架中写sql在xml文件中
    自由创蚁-青少年积木式编程平台正式发布了!
    回调函数
    全面理解Javascript闭包和闭包的几种写法及用途
    hover伪类
    添加背景音乐
  • 原文地址:https://www.cnblogs.com/wudingfeng/p/1887481.html
Copyright © 2011-2022 走看看