带有垫片/保险杠的动态宽度div

Question

好吧，我试图以百万种不同的方式实现这一点，并且无法找到一个好的方法。

我想要做的就是在样式表中创建一个没有定义宽度的框，用作任意数量的仪表板项的模块容器，然后使用width25，width33，width50，width100的类来设置宽度。模块容器为25％，33％等......无论情况如何。

在每个容器之间，我想要一个垫片或保险杠。假设我连续三个盒子：25％，50％，25％。为了添加一个spacer，我必须将我的width25设置为24％，并将我的保险杠设置为1％，并且尝试填充父容器的100％宽度会变得奇怪。我有道理吗？

有更好的方法吗？当我向框中添加填充时，我遇到了更多问题，因为这也增加了div的总宽度。我只想要一些漂亮干净的东西：

...每个模块都有相同的类，除了宽度类。理想情况下，这些宽度将是宽度25 = 25％...宽度50 = 50％......并且不会模糊宽度以弥补保险杠尺寸。

思考？这让我很生气。

Answer 1

好吧，在我看来，你有大约4种选择。

1. box-sizing: border-box
   - 这将改变计算宽度的方式，因此，如果您说width: 30%并添加2px边框，则框保持30％，并且边框将在指定宽度内呈现;

2. calc()
   - 这使您可以执行width: calc(20% - 2px);

之类的操作

3. outline
   - 轮廓围绕元素呈现，不影响其大小。这个可能不适合你。

4. div中的div
   - 将外部div的宽度设置为所需的间距，然后根据自己的喜好设置内部的样式。

Answer 2

看看这些网格系统。

http://960.gs/

http://goldengridsystem.com/

http://grids.heroku.com/

还有很多。这些应该足以让你入门。

example: http://jsfiddle.net/E9zfY/

Answer 3

听起来你想要使用填充。这样，模块盒可以使您的数学运算更合理，但您可以创建空间效果。

缺点：你会在内容区域本身松开px宽度和高度，但你的盒子模型数学并不是那么糟糕。