Question

我正在使用SiteFinity CMS。我的特殊布局是3列，宽度为100％（侧柱是固定宽度，中心是流体）。在中间列中，我想使用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">
            &nbsp;
        </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">
            &nbsp;
        </div>
        <div class="grid_5 omega br">
            <p class="brc">
                <asp:ContentPlaceHolder ID="BottomRightBox" runat="server" />
            </p>
        </div>
    </div>
</div>

以下是结果的屏幕截图：

alt text

但是，如果我使用其他类标记（tl，tr等）并添加填充，则会发生以下情况：

alt text

这是我用来添加填充的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 */

alt text

对我而言，这似乎是一个胶带修复。对此有何反馈？

Answer 1

你之后的布局被称为CSS'圣杯'。 A list apart has a great article on it. http://www.alistapart.com/articles/holygrail

This one is good too. http://matthewjamestaylor.com/blog/perfect-3-column.htm

如果您认为sitefinity中的css导致问题，请从yui-grids抓取'reset.css'并在您的自定义CSS之前添加它。它将每个css元素重置为标准默认值。（IE，Firefox，Safari等...都以相同的默认值开头。）您可以使用yui-grid子而不是960网格系统。如果您想看到yui-grid示例，请回到Holler。

关于CSS布局和CMS的问题

编辑：

1 个答案: