2013-10-31    之前自己一直都在找，现在终于弄懂了，顺便记录下来

 一、左边宽度固定，右边自适应，一行两列的div布局         

方法1、

html代码：

  

<div style="border:1px solid green; height:500px;">

   <div class="subfield_lf">

         aaaa

      </div>

      <div class="subfield_lr">

      bbbbbb

      </div>

</div>

 

css代码：

 <style type="text/css">

.subfield_lf {

    display: inline;

    float: left;

    margin: 0 10px 0 0;

    width: 210px;

 border:1px solid green;

}

.subfield_lr {

    overflow: hidden;

 border:1px  solid red;

}

</style>

 

 

 

 

 

方法2、  

<div id="wrap">

               <div id="jq-content">

                  <div id="jqbody-menu">

                       内容

                    </div>

                <div id="jqbody-content">

                    <div class="body-wrap">

                        内容

                    </div>

                </div>

            </div>

            <div style="clear:both;"></div>

        </div>

     css文件：

    body,ul,li{ margin:0; padding:0;}

#wrap{

width:100%;

min-width:1004px;

height:auto;

min-height:10%;

clear:both;

padding-bottom:10px;

border:1px solid green;

}

#jq-content{

height:100%;

clear:both;

margin-left:175px;

 }

#jqbody-menu{

position:relative;

list-style:none;

width:140px;

margin:0px 0px 0px -165px;

float:left;

background-color:#fff;

padding:5px;

border:1px red solid;

}

#jqbody-content{

float:left;

overflow:hidden;

height:100%;

width:100%;

font-weight:normal;

font-size:200%;

background-color:pink

}

.body-wrap{

width:99%;

margin:0 15px 0 0px;

padding:15px 0 0px 10px;

}

.clear{ clear:both;/* 清除浮动 */}