html - 可能有一个 100% 宽的 div 但将它的内容限制在一个设置的最大宽度？

Question

我知道这可以通过 2 个 div 轻松完成，例如，将外部的设置为 100% 宽度，将内部的设置为 max-width 1000px。

我很好奇是否可以只用一个 div 而不是两个来完成。

Answer 1

是的，这是可能的，

因为 html 元素永远不会“只是 100%”。它必须是其他东西的 100%。它要么与包含它的第一个具有相对位置、绝对位置或固定位置的元素 100% 相关。或者 100% 与窗口相关。

当周围容器(可以是窗口)大于 1000 像素时，最大宽度将从宽度接管。

检查下面的片段。如果您在全窗口 View 中调整窗口大小，则不会有滚动条。

.testwidth {
  background: yellow;
  height: 100px;
  max-width: 1000px;
  width: 100%;
}

<div class="testwidth">heyho</div>