javascript - 一旦我使图像全宽，宽度就不正确

Question

我有一个包含 3 个 800x200 图像的容器

通常它们的容器宽度应该在 ~2400 左右。一切都很好，但是一旦我添加 width: 100%;对于图像，则容器宽度等于 cu 100vw

我不明白为什么会这样？添加宽度:100%；显示 block 元素应该没有什么区别。

例子:

容器之间的唯一区别是第二个容器的宽度为:100%；应用于图像

代码 - http://codepen.io/digitalzoomstudio/pen/eBBjNL

.fullwidth{
  display:block;
}
.fullwidthwithwidth100{
  display:block;
  width: 100%;
}

Answer 1

容器有 white-space:nowrap 和 .csc-item 有 display:inline。

这意味着容器在没有特定宽度时会扩展以包含其内容(并且由于 nowrap 应用它会扩展其宽度)。

在容器上设置宽度的情况下，您强制它具有该宽度(固定并从其自己的容器继承)，因此不会扩展以包含其内容。内容会溢出它。