中心div在100％宽度内div

我在尝试Blueprint CSS框架，并且很难搞清楚如何进行整体布局。中心div在100％宽度内div

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

所以，我已经放置了一个标题和一个页脚，它位于950px宽的主“容器”div之外。我将标题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>

下面是用于头和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，并且我没有运气就尝试过，所以它们与问题无关。

任何想法我做错了什么？

来源

2011-07-15 Anders

您需要设置一个宽度#headerContent，因为没有它，默认为width:100%，如果你把一个950px宽度的div，你应该没问题。

来源

2011-07-15 14:28:33 Phil

实际上，这不是问题，span-24类给它一个950px的宽度。我提到它有，但忘了提及它的来源。这是Blueprint框架的一部分。不过，我找到了解决方案，我会尽快发布。 – Anders

找到了答案：您不应该在Blueprint框架中明确使用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>

我不能说我明白究竟为什么之前没有工作，这令我很担心，因为我想这个框架简化布局，但是这使得它更难理解。据我所知，它应该与第一个代码一起工作...

来源

2011-07-15 14:36:26 Anders

中心div在100％宽度内div

回答

相关问题