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;}

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

  • 相关阅读:
    【设计模式】模板模式
    【设计模式】策略模式
    【设计模式】空对象模式
    【设计模式】状态模式
    【设计模式】观察者模式
    【设计模式】备忘录模式
    【设计模式】中介者模式
    【设计模式】迭代器模式
    【设计模式】解释器模式
    【设计模式】命令模式
  • 原文地址:https://www.cnblogs.com/wudingfeng/p/1887481.html
Copyright © 2011-2022 走看看