html - 在 div 中填充

Question

我根本想不通:我有一个以屏幕为中心、宽度为 60% 的 div。在这个 div 中，我还有 3 个 div，它们向左浮动，宽度为 33%，背景颜色为灰色。 div 充满了文本，每个 div 有一张图片。每个 div 现在应该在“maindiv”中占据 1/3 的空间。这工作正常，但只要我给我的 3 个“contentdivs”填充，文本就会分开一点，第三个 div 会在其他 div 下方徘徊。我还希望我的 3 个 div 周围有一个边距，所以所有 div 之间都有一个间隙。但这只有在我将 div 的宽度设置为 31% 时才有效。不过，一旦我缩小浏览器，第三个就会再次弹出到其他浏览器下方。

现在的样子:

宽度为 33.33% 时的外观

如何解决这个问题？我的意思是我通过以 % 为单位设置大小来将 div 设置为相对宽度。因此，只要我缩小浏览器窗口，div 就应该缩小。我试图用其他 div 包围所有 div，并弄乱了边距和填充，但这是行不通的。

Answer 1

很可能是盒子模型的错。填充、边距和边框可以以不同的方式添加在一起。添加box-sizing:border-box到容器及其元素。毫无疑问，这会实现您打算执行的操作，width:33.3333% 将按预期进行。

添加边距仍然会破坏元素？还有一个很棒的东西叫calc() .假设您的 margin 为 8px，这只是多了几个像素。使用 calc()，您可以像这样减去额外的边距:

.item{ width:calc(33.3333vw - 8px); }

请注意，减号周围必须有空格。试一试并包括您的 margin 。