我正在我现有的站点上实施960 网格系统。我正在使用 jQuery 主题,这意味着每个具有内容的 div 都被分配了一个类ui-widget-content
,作为主题的一部分,它给它一个 1px 的边框。我喜欢这种边框设计,因为我的内容 div 是白色的,而我的网站的背景是白色的 - 给它一个很好的视觉对比。
然而,我遇到的问题是,使用这些 1px 边框,我无法水平放置 div,因为它们太大了。例如,如果我这样做:
<div class="grid_16 alpha omega">
<div class="grid_10 alpha ui-widget-content">
<div class="grid_5 alpha">some stuf...</div>
<div class="grid_5 omega">some stuf...</div>
</div>
<div class="grid_6 omega">
more stuf...
</div>
</div>
这导致grid_10
div 太大了 2 个像素,因此,grid_16
在最右边的 div 的末端悬空。我想我会通过创建一个像这样的新类来解决这个问题:
.border-fix {
border-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
然后将其添加到grid_10
div 中,如下所示:
<div class="grid_16 alpha omega">
<div class="grid_10 alpha ui-widget-content border-fix">
<div class="grid_5 alpha">some stuf...</div>
<div class="grid_5 omega">some stuf...</div>
</div>
<div class="grid_6 omega">
more stuf...
</div>
</div>
但是,现在,我的两个内部grid_5
div 被挤压,因此它们现在彼此叠放,而不是并排,因为水平空间不足(因为grid_10
div 比边界窄 2 个像素)里面,不是外面)
那么我该如何解决这个问题(或者它是否可以修复)?我喜欢在 div 上有边框的风格,因为它很好地将内容与背景分开。但是,有了边框,我的 div 宽度被弄乱了。正如这个问题所建议的那样,我不喜欢用额外的列来强制它。
我可以尝试任何魔术吗?
谢谢