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;/* 清除浮动 */}