猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如下，如何让盒子自动占完其余所有宽度？

</div>
<div3></div>
<div4></div>
</div>
</body>

div1宽度100％
div2和div4宽度40px
div2，div3左浮动
div4右浮动
div3占完剩余部分

慕尼黑8549860
浏览 327回答 2
2回答

繁花如伊

可以用clac，因为你2.4都是固定宽度，第3个盒子的宽度可以这样设置：width: calc(100% - 80px);
0

湖上湖

<!DOCTYPE&nbsp;html><html><head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="utf-8"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;<title>_</title>&nbsp;&nbsp;&nbsp;&nbsp;<style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;.div1{&nbsp;width:100%;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.div2{&nbsp;width:40px;&nbsp;float:left;&nbsp;background:#aaa;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.div3{&nbsp;width:calc(100%&nbsp;-&nbsp;80px);&nbsp;float:left;&nbsp;background:#ccc;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.div4{&nbsp;width:40px;&nbsp;float:right;&nbsp;background:#eee;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style></head><body>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div2">2</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div3">3</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div4">4</div>&nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3
Html5