使div填充剩余宽度

Question

如何使div填充剩余宽度？

例如

<div id="Main" style="width: 500px;">

  <div id="div1" style="width: 100px;"></div>

  <div id="div2"></div>

  <div id="div3" style="width: 100px; float: right;"></div>

</div>

如何获取div2来填充剩余部分？

Answer 1

试试这样的事情：<style>&nbsp; &nbsp; #divMain { width: 500px; }&nbsp; &nbsp; #left-div { width: 100px; float: left; background-color: #fcc; }&nbsp; &nbsp; #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }&nbsp; &nbsp; #right-div { width: 100px; float: right; background-color: #ccf; }</style><div id="divMain">&nbsp; &nbsp; <div id="left-div">&nbsp; &nbsp; &nbsp; &nbsp; left div&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="right-div">&nbsp; &nbsp; &nbsp; &nbsp; right div&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="middle-div">&nbsp; &nbsp; &nbsp; &nbsp; middle div<br />bit taller&nbsp; &nbsp; </div></div>div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。需要注意的是“中间格”云后的“右格”在HTML