我正在使用 SiteFinity CMS。我的特定布局是 100% 宽度的 3 列（侧列是固定宽度，中心是流动的）。在中心栏中，我想使用 CSS 将其分成多个“框”。我的第一次尝试是使用960 Grid System。这是我使用的标记：
<div class="container_12">
<div class="grid_12">
<div class="grid_5 alpha tl">
<p class="tlc">
<asp:ContentPlaceHolder ID="TopLeftBox" runat="server" />
</p>
</div>
<div class="grid_2">
</div>
<div class="grid_5 omega tr">
<p class="trc">
<asp:ContentPlaceHolder ID="TopRightBox" runat="server" />
</p>
</div>
<div class="clear">
</div>
<div class="grid_5 alpha bl">
<p class="blc">
<asp:ContentPlaceHolder ID="BottomLeftBox" runat="server" />
</p>
</div>
<div class="grid_2">
</div>
<div class="grid_5 omega br">
<p class="brc">
<asp:ContentPlaceHolder ID="BottomRightBox" runat="server" />
</p>
</div>
</div>
</div>
这是结果的屏幕截图：
但是，如果我使用附加的类标签（tl、tr等）并添加填充，则会发生以下情况：
这是我用来添加填充的 CSS：
.tl
{
background-color:#EEEEEE;
padding:5px;
}
.tr
{
background-color:#DDDDDD;
padding:5px;
}
我想这是因为 CSS 冲突，因为 SiteFinity 和 960gs 都有自己独特的样式表。
谁能为我提供一些关于为什么会发生这种情况的额外见解，以及如何让这两者很好地协同工作？
谢谢！
编辑：
所以我添加了以下CSS：
.tl
{
background-color:#EEEEEE;
margin:-5px;
padding:5px;
margin-bottom:25px;
margin-top:15px;
}
.tr
{
background-color:#DDDDDD;
margin:-5px;
padding:5px;
margin-bottom:25px;
margin-top:15px;
}
/* I am almost ashamed of how ugly this CSS is */
对我来说，这似乎是一个胶带修复。对此有何反馈？