html - CSS非拉伸(stretch)框

Question

我对我的布局有疑问。我有这样的设置:

<div id="container">
   <div id="body">
      <div id="item">
      </div>
      <div id="item">
      </div>
   </div>
</div>

而且我希望主体框随着我放入其中的元素数量而拉伸(stretch)，但事实并非如此。任何人都知道如何用 css 解决这个问题。

Answer 1

如果您的元素是 float 的，您可以添加一个带有 clear: both; 参数集的 block ，正如 Pat 已经提到的那样。

如果您不想在代码中再添加一个元素，您可以将 overflow: hidden; 应用于您的正文:

<div id="container">
    <div id="body" style="overflow: hidden;">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

不过要小心，因为所有粘在主体盒外面的东西都会被切掉。