css+div布局

1.一行一列宽度自适应

<div id="d1">一行一列自动宽度适应</div>

<style type="text/css">
#d1{
height:100px;
border:1px solid red;
margin:0 auto;
}

</style>

2.一行两列宽度自适应

div id="d1">左列宽度固定</div>
<div id="d2">右列，自动宽度，自适应</div>

<style type="text/css">
#d1{
width:100px;
height:100px;
border:2px solid red;
margin:0;
float:left;
}
#d2{
width:80%;
height:100px;
border:2px solid red;
margin-left:104px;
}

</style>

3.一行两列固定宽度据中

style type="text/css">
#content{
width:300px;
margin:0 auto;

}
#d1{
width:100px;
height:100px;
border:2px solid red;
float:left;
}
#d2{
width:200px;
height:100px;
border:2px solid red;
margin-left:104px;
}

</style>

<div id=“content”>
<div id="d1">左列宽度固定</div>
<div id="d2">右列，自动宽度，自适应</div>
</div>

4