两个div在一行,第一个用width:150px,想让第2个div铺满剩余的部分,应该怎么设置
展开全部
方法一:
<style>
.main{position:relative; height:300px;}
.one{position: absolute; left:0; height:300px; top:0; width:150px; background:#444;}
.two{display:block; margin-left:150px; height:300px; background:#ccc;}
</style>
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
方法二:
<style>
.one{display:block; height:300px; width:150px; background:#444; float:left;}
.two{display:block; height:300px; width: calc(100% - 150px);background:#ccc; float:left;}
</style>
<div class="one"></div>
<div class="two"></div>
方法三:
<style>
.wrap {width: 100%;height: 300px;display: -moz-box;display: -webkit-box;display: box;}
.sectionOne {background: orange;width: 150px;}
.sectionTwo {background: purple;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;}
</style>
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
</article>
<style>
.main{position:relative; height:300px;}
.one{position: absolute; left:0; height:300px; top:0; width:150px; background:#444;}
.two{display:block; margin-left:150px; height:300px; background:#ccc;}
</style>
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
方法二:
<style>
.one{display:block; height:300px; width:150px; background:#444; float:left;}
.two{display:block; height:300px; width: calc(100% - 150px);background:#ccc; float:left;}
</style>
<div class="one"></div>
<div class="two"></div>
方法三:
<style>
.wrap {width: 100%;height: 300px;display: -moz-box;display: -webkit-box;display: box;}
.sectionOne {background: orange;width: 150px;}
.sectionTwo {background: purple;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;}
</style>
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
</article>
追问
非常感谢哈
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询