zoukankan      html  css  js  c++  java
  • 经典的两列自动适应高度布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>两列高度自适应</title>
    <style type="text/css">
    <!--
    *
    {
    margin
    :0;
    padding
    :0;
    }
    #main
    {
    overflow
    :hidden;
    width
    :600px; margin:0 auto
    }
    .sidebar
    {
    float
    :left;
    width
    :150px;
    background
    :#ff0000;
    }
    .content
    {
    background
    :#ff0;
    overflow
    :hidden;
    _float
    :left;/*兼容IE6*/
    }
    .row
    {
    margin-bottom
    :-10000px;
    padding-bottom
    :10000px;/*内外补丁是关键*/
    }
    -->
    </style>
    </head>
    <body>
    <div id="main">
    <div class="sidebar row">
    <p>left</p>
    <p>left</p>
    </div>
    <div class="content row">
    <p>right<br />
    right
    <br />
    right
    <br />
    right
    <br />
    right
    <br />
    right
    <br />
    <br /></p>
    <span style="float:right; font-size:0; position:relative; ">&nbsp;</span>
    <!--为了万恶的ie6-->
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    Linux产生coredump文件(core)
    shell脚本每五分钟执行一次可执行程序(nohup)
    VIM快捷操作
    日期正则表达式
    istringstream字符串流对象
    json和pickle模块
    sys模块
    random模块
    time模块
    python的模块
  • 原文地址:https://www.cnblogs.com/bennman/p/1954910.html
Copyright © 2011-2022 走看看