3

我有以下 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/）：

  • maindiv 宽度为 200 像素，溢出：自动（即，如果宽度超过 200 像素，则滚动内容）。
  • 因此，由于contentsdiv 是 300px 宽，它水平滚动。
  • 所以，我希望containerdiv 也是 300px（因为它里面的元素是 300px 宽），但事实并非如此！ 它的宽度为 200 像素。

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

4

3 回答 3

2

你只需要让你的容器漂浮

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

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

于 2013-01-25T08:54:55.027 回答
0

你需要稍微调整你的 CSS。这将起作用：

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

.contents {
  width: 300px;
  float: left;
}
于 2013-01-25T08:40:48.287 回答
-1

实际上，您应该添加overflow: auto容器中的 css 而不是主 css

于 2013-01-25T08:47:26.137 回答