Question

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

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

我希望身体盒子能够放入我放入的物品数量，但事实并非如此。任何人都知道如何解决这个问题。

Answer 1

首先，你应该为你的项目div使用一个类，因为id在页面上应该是唯一的。其次，这可能是由于您的项目div被浮动引起的。如果你在它们下面添加一个清算元素，它应该修复它：

<div id="container">
    <div id="body">
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both"></div>
    </div>
</div>

Answer 2

让你的项目div向左浮动（display: inline也可以工作，没有尝试过），并将你的身体div的显示设置为display:inline-block;。这应该缩小以适应其内容。

又快又脏：

<div id="container">
    <div id="body" style="display:inline-block; overflow: auto;">
        <div class="item" style="float: left;">
            Hi
        </div>
        <div class="item" style="float: left">
            There
        </div>
    </div>
</div>

编辑：已修复，感谢Matt Sach。

Answer 3

如果你的项目是浮动的，你可以添加一个clear: both;参数集的块，正如Pat已经提到的那样。

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

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

但是要小心，因为身体盒子外面的东西都会被切断。

Answer 4

我个人不鼓励使用内联块，因为旧版本的Internet Explorer支持很差。

IE 6-8（仅限8兼容模式）存在问题。

CSS非拉伸盒

4 个答案: