中心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

回答

相關問題