左侧列定宽,主体列自适应宽度自适应
基础代码部分:
<body>
<div class="div1">左侧列</div>
<div class="div2">主题列</div>
</body>
第一种方式:
用浮动float + 溢出隐藏 overflow: hidden
<style>
.div1{
width: 200px;
height: 200px;
background-color: #fade45;
float: left;
}
.div2{
height:200px;
overflow: hidden;
background-color: #f00;
}
</style>
第二种方式:
用定位position: absolute + 外边距margin
<style>
.div1{
width: 200px;
height: 200px;
position: absolute;
background-color: #fade45;
}
.div2{
height:200px;
margin-left: 200px;
background-color: #f00;
}
</style>
第三种方式:
用浮动float + CSS 3中的calc函数(此函数用于动态计算长度值)
<style>
.div1{
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
.div2{
width: calc(100% - 200px) ;
background-color: #0f0;
height: 300px;
float: left;
}
</style>