有<DIV>两个，怎样让它们水平排列，左边的为固定宽度，右边为自适应浏览器的宽度

如题：有<DIV>两个，怎样让它们水平排列，左边的为固定宽度，右边为自适应浏览器的宽度。

解决方案 »

  1.   

    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <div style="width:50px; height:50px; background-color:blue; float:inline-block"></div>
    <div style="width:100%; height:150px; background-color:red; display:inline-block"></div>
    </body>
    </html>
      

  2.   

    这些是自己写的代码，不能实现，求帮助！
    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <div style="width:50px; height:50px; background-color:blue; float:inline-block"></div>
    <div style="width:100%; height:150px; background-color:red; display:inline-block"></div>
    </body>
    </html>
      

  3.   

    水平?
    <div style="width:50px; height:50px; position:absolute;top:0px;left:0px;"></div>
    <div style="width:100%; height:150px; position:absolute;top:0px;left:50px;"></div>
      

  4.   

    要不用table布局吧，右边不用设置，左边隐藏的时候右边自动填满。或者你设置百分比也可以解决，要不你就用js了动态算整个浏览器窗口中可视区域的宽度减去左边固定的宽度就是右边的宽度。，记住要减去边框哦
      

  5.   


    <!DOCTYPE HTML>
    <html lang="">
    <head>
    <meta charset="gbk">
    <title></title>
    </head>
    <body>
    <style type="text/css">
    html{ height:100% }
    body{ margin:0; height:100% }
    #left{ width:150px; height:100%; float:left; _margin-right:-3px; background-color: yellow }
    #main{ height:100%; background-color: green }
    </style> <div id="left">2222222</div>
    <div id="main">3333333333333</div>
    </body>
    </html>参考下最好还是table来做。
      

  6.   

    很简单的，固定宽度的DIV用一个浮动就可以了，代码如下<!DOCTYPE HTML>
    <html>
    <head>
        <title>div自适应宽度</title>
        <style type="text/css">
            .leftDiv
    {
    width: 80px;
    float: left;
    border: 1px solid black;
    }
    .rightDiv
    {
    border: 1px solid red;
    }
        </style>
    </head>
    <body>
    <div class="leftDiv">

    </div>
    <div class="rightDiv">

    </div>
    </body>
    </html>