html - 为什么 wrapper 不包裹盒子？

Question

我正在努力解决一个看似简单的问题:

我的代码:

* {
    font-family: tahoma;
}
body {
    background: #333;
}
.wrapper {
    padding: 10px;
    background: white;
    width: 100%;
}
.box {
    margin-top: 40px;
    width: 1100px;
    height: 400px;
    background: #aaa;
}

<div class="wrapper">
    <div class="box">
        box
    </div>
</div>

包装器中包含的框具有固定大小，这可能会在小屏幕上溢出包装器。为什么 wrapper 不包裹盒子？我该怎么做？

您还可以在 this jsFiddle 中查看问题.

Answer 1

为了使这项工作:

• 删除 width: 100%并添加到包装器 display: inline-block .

• 这样做，将使包装器具有足够的宽度来包裹盒子。放width: 100% 将包装器限制在屏幕的宽度内，如果盒子的宽度大于屏幕的宽度，它将不起作用。

• 如果您不想有水平滚动条，尤其是在较窄的屏幕上，请使用:box-sizing: border-box在 wrapper 上。

CSS:

.wrapper {
  display: inline-block; /* Ensures that the box stays wrapped */
  padding: 10px;
  background: white;
  box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}

这是一个working version你的 jsFiddle，同时解决了包装问题并取消了水平滚动条。

* {
  font-family: tahoma;
}

body {
  background: #333;
}

.wrapper {
  box-sizing: border-box display: inline-block;
  padding: 10px;
  background: white;
}

.box {
  position: relative;
  margin-top: 40px;
  height: 400px;
  background: #aaa;
}

<div class="wrapper">
  <div class="box">
    box
  </div>
</div>

供引用:

• display: inline-block;
• box-sizing: border-box;