0

好吧,我已经尝试过一百万种不同的方法来实现这一点,但找不到一个好的方法。

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

在此处输入图像描述

在每个容器之间,我想要一个垫片或保险杠。假设我在一行中有三个盒子:25%、50%、25%。为了添加一个垫片,我必须将我的 width25 设置为 24%,将我的缓冲设置为 1%,并且尝试填充父容器的 100% 宽度时事情变得很奇怪。我说得有道理吗?

有一个更好的方法吗?当我向盒子添加填充时,我遇到了更多问题,因为这也增加了 div 的总宽度。我只想要这样漂亮干净的东西:

在此处输入图像描述

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

想法?这让我发疯。

4

3 回答 3

2

好的,在我看来,您有大约 4 个选项。

  1. box-sizing: border-box
    - 这将改变宽度的计算方式,所以如果你说width: 30%并添加一个 2px 的边框,框保持 30%,并且边框呈现在你指定的宽度内;

  2. calc()
    - 这允许你做类似的事情width: calc(20% - 2px);

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

  4. divs inside divs
    - 将外部 div 的宽度设置为您需要的间距,然后根据您的喜好设置内部 div 的样式。

于 2013-02-05T20:39:45.257 回答
0

看看这些网格系统。

http://960.gs/

http://goldengridsystem.com/

http://grids.heroku.com/

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

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

于 2013-02-05T20:33:17.940 回答
0

听起来您想使用填充。这样,模块框让你的数学更合理,但你可以创造你的空间效果。

缺点:您会在内容区域本身中丢失 px 宽度和高度,但您的盒子模型数学并不是那么糟糕。

于 2013-02-05T20:33:59.910 回答