css容器宽度和溢出属性如何工作？

Question

嗨，我这里有jsbin，它看起来应该是这样的：

我的问题是：

问题1：

400％做什么？为什么我们需要设置它？

#slides .inner {
  width: 400%;
}

问题2：

如果我这样评论overflow：

#overflow {
  width: 100%;
  /* overflow: hidden; */
}

它看起来像这样，即使我已将max-width设置为300px

但是，如果我保留overflow并注释掉两个width

#overflow {
  width: 100%;
  overflow: hidden;
}

#slides .inner {
  /* width: 400%; */
}
#slides article {
  /* width: 25%; */
  float: left;
}

它看起来像：

不应该所有图像块都与上图所示的行相同吗？

问题3：

为什么我们需要设置宽度？如果我发表评论width: 25%;，它仍会正常运作。

#slides article {
  width: 25%;
  float: left;
}

Answer 1

如果您将overflow:hidden与width:100%一起提供，实际上毫无意义 如果width获得效果，请在max-width中给px或overflow:hidden。!!

注意：如果我错了，任何人都可以纠正我。!!

如果你试试 此

http://jsbin.com/hivunuga/7/edit

<强> CSS

#slider {
  max-width:300px;

  text-align: center;
  margin: 0 auto;
}

#overflow {
  width: 100%;

}

#slides .inner {
  width: 1200px;
}

你会知道为什么我们需要overflow:hidden;

Answer 2

问题1：

#slides .inner设置为width：400％;因为您有4张幻灯片，并且您希望每张幻灯片占用100％的父元素，在本例中为300px #slides div。

#slides .inner {
width: 400%;
}

问题2：

＆＃34;溢出：隐藏;＆＃34;被调用以隐藏其他300％并且仅在300px #slides div中的活动幻灯片时显示它们。

当您删除＆＃34;溢出：隐藏;＆＃34;显示所有幻灯片，但实际的#slides div本身仍然只有300px。

当您注释掉＆＃34;宽度：400％;＆＃34;元素堆叠，因为宽度回落到由以下定义的300px：

#slider {
max-width: 300px;
}

Answer 3

问题1：

400％做什么？

#slides .inner {
  width: 400%;
}

这会将元素.inner的宽度设置为其父级宽度的4倍（400％）。

问题2：

如果我注释掉这样的溢出：

#overflow {
  width: 100%;
  //overflow: hidden;
}

这不是CSS中的有效注释，会导致错误或不需要的样式。尝试这样评论：

/* This is a CSS comment */