当我给出百分比值宽度时div不显示

Question

我在div中有3个框。我试图创建一个每个盒子都是容器宽度大小的三分之一，因此所有3个盒子都应该填充它的容器div。我也试图为他们设置最大尺寸。

这是JSFiddle。

问题是，3盒子根本不显示。我做错了什么，我该如何解决？

Answer 1

您需要设置#boxContainer的宽度以填充所有空间。你在.box的宽度上放2个点。而且你没有给.box一个真正的“高度”，height: 100%不适合非绝对或固定的元素。

http://jsfiddle.net/iagomelanias/wpg8bvtp/4/

PS 1：不要忘记你在.box一个max-width，这就是为什么盒未完全填满所有的宽度。

PS 2：您的边框不在第一个容器中，因此您可以使用box-sizing: border-box来修复它。 See here。

PS 3：如果你想要做它反应灵敏，你可以简单地添加media query使.box使用宽度为100％，并创下max-width至160像素。 You can see it in this example.