Question

我正在尝试使用Blueprint CSS框架，并且很难弄清楚如何进行整体布局。

看起来蓝图（据我所知，到目前为止）让你使用950px的设置页面宽度。我想你可以通过一些修改改变它，但无论如何必须有一些宽度，所以没关系。问题是，即使我希望页面的主要内容为950px宽，我想要100％宽的页眉和页脚。

所以我在主“容器”div之外放置了一个页眉和页脚，宽度为950px。我将标题div设置为100％。然后我在其中有一个“headerContent”div（包含菜单，徽标等），其宽度为950px（蓝图术语中为span-24）。但我希望headerContent div在标题div中居中。

我一直使用“margin：0 auto”技巧来做到这一点，但由于某些原因它现在根本不起作用。

这是html：

            <div id="header" class="blueheader">

                <div id="headerContent" class="span-24">

                    <div id="logo" class="span-6">

                        <a href="/">

                            <img src="/images/expertinfo.png" width="230" height="62" />

                            </a>

                    </div>

                    <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                    <div id="logindisplay" class="span-2">

                            <a href="/Account/LogOn">Logga in</a>



                    </div>

                </div>

            </div>

这里是header和headercontent的css：

#headerContent
{
    overflow: auto;
    zoom: 1;
    margin: 0 auto;

}

#header
{

    width: 100%;
    position: relative;
    margin-bottom: 0px;
    color: #000;    
    margin-bottom: 0px;
    overflow: auto;
    zoom: 1;

}

溢出和缩放部分只是我读到的另一个技巧，以避免使用空div来清除包含div，并且我试着没有它们没有运气，所以它们与问题无关。

任何想法我做错了什么？

Answer 1

您需要设置#headerContent的宽度，因为如果您在div中放置width:100%宽度，则默认为950px，您应该没问题。

Answer 2

找到答案：你不应该在蓝图框架中的headerContent上使用span-24，而应该使用容器类。这是有效的：

        <div id="header" class="blueheader">
            <div id="headerContent" class="container">
                <div id="logo" class="span-6">
                    <a href="@Url.Action("Index", "Home")">
                        <img src="/images/expertinfo.png" width="230" height="62" />
                        </a>
                </div>
                <div id="menucontainer" class="span-14">@Html.Raw(Html.Menu())</div>
                <div id="logindisplay" class="span-2">
                    @Html.Partial("_LogOnPartial")
                </div>
            </div>
        </div>

我不能说我理解为什么它之前没有用，这让我很担心，因为我正在尝试这个框架来简化布局，但这使得它更难理解。据我所知，它应该与第一个代码一起工作......

中心div在100％宽度div内

2 个答案: