Question

我有以下HTML代码：

<div class="main">
    <div class="container">
        <div class="contents">
            Some funny stuff in here
        </div>
    </div>
</div>

使用以下CSS：

.main {
    overflow: auto;
    width: 200px;
}
.container {
    border: 1px solid black;
}
.contents {
    width: 300px;
}

这就是这个页面的作用（见http://jsfiddle.net/C7RDh/7/）：

main div是200px宽度，溢出：auto（即如果宽度超过200px则滚动内容）。
因此，当contents div为300px宽时，它会水平滚动。
所以，我希望container div也是300px（因为它内部的元素是300px宽），但它不是！它是200px宽。

为什么？我希望它的内容与其内容一样宽（300px），我该如何实现呢？

Answer 1

你只需要让你的容器浮动

.container {
     border: 1px solid black;
     float: left;
 }

Float会自动将你的外部div调整为内部div宽度。

Answer 2

您需要稍微调整一下CSS。这将有效：

.main {
  overflow: auto;
  width: 200px;
  float: left;
}
.container {
  border: 1px solid black;
  float: left;
}

.contents {
  width: 300px;
  float: left;
}

Answer 3

实际上你应该在容器css中添加overflow: auto而不是主css

DIV没有调整宽度到另一个DIV内的内容溢出：auto

3 个答案: