六种简单方案实现左固定,右边自适应。
html代码如下,只是CSS不同:
<div class="wrap" >
<div class="left">左边宽度固定,高度不定</div>
<div class="right">右边自适应,高度不定</div>
</div>
1.左右子元素均设置inline-block
<style>
.wrap{
font-size:0px;/*通过设置父元素字体大小为0;来消除div之间的空格。或者通过注释,<div>wwww</div><!-- --><div> wwww</div>*/
padding: 20px;
border:2px dashed red;
box-sizing: content-box;/*父元素是content-box模式*,为了计算右侧盒子的宽度,我们把子元素设置为border-box模式,这样宽度就是整个盒子的宽度了。*/
}
.left{
box-sizing: border-box;
display:inline-block;/*两个子元素都设置为inline-block*/
vertical-align: top; /*两个inline-block的盒子,必须两个子元素都顶端对齐。*/
background: green;
width:200px;
height: