两个div在一行，第一个用width:150px,想让第2个div铺满剩余的部分，应该怎么设置

发布网友发布时间：2022-04-21 14:39

共2个回答

热心网友时间：2022-04-21 16:08

方法一：
<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>追问非常感谢哈

热心网友时间：2022-04-21 17:26

用一个div蒋这两个div包起来，设置padding-left:150px。定宽的div设置margin-left:-150px;第二个div 的width:100%.