Question

如果你看下面的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>

<style type="text/css">

    #div1 {  border:1px solid red; overflow:hidden;  }
    #div1 ul {  list-style-type:none; margin:0; padding:0;  }
    #div1 li {  display:inline; float:left;  }
    #div2 {  background-color:pink; width:100%; height:40px;  }
    #div3 {  background-color:yellow; width:40px; height:40px;  }

</style>

<div id="div1">
<ul>
   <li><div id="div2">div2</div3></li>
   <li><div id="div3">div3</div3></li>
</ul>
</div>

</body>
</html>

一旦分配了40px宽度的DIV3，我试图让DIV2占用父div的剩余宽度。

这可能吗？

Answer 1

我的建议是分别在display:table和display:table-cell上使用ul和li，而不是float和display:inline。为了让生活更轻松，我已将id移至li元素而不是div s

<强> HTML

<div id="div1">
<ul>
   <li id="div2"><div>div2</div></li>
   <li id="div3"><div>div3</div></li>
</ul>
</div>

<强> CSS

#div1 {  border:1px solid red; overflow:hidden;  }
#div1 ul {  list-style-type:none; margin:0; padding:0; display:table; width:100%;  }
#div1 li {  display:table-cell;  }
#div2 {  background-color:pink; width:100%; height:40px;  }
#div3 {  background-color:yellow; width:40px; height:40px;  }

JS FIDDLE

Answer 2

块级元素（如<div>或<li>或任何display:block）会自动吸收可用宽度。这样的事情应该有效：

#div1 {
  border: 1px solid red;
  overflow: hidden;
}
#div2 {
  background-color: pink;
  height: 40px;
}
#div3 {
  background-color: yellow;
  float: right;
  width: 40px;
  height: 40px;
}

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

请注意，需要先放置已浮动的内容才能使此方法有效。

自动调整嵌套div的大小

2 个答案: