960網格系統 - 網格嵌套佈局有問題

我剛剛開始發展爲自己的業餘愛好網站，並嘗試使用960 css grid system佈局在屏幕上我的HTML元素。960網格系統 - 網格嵌套佈局有問題

我得到了基本思路和實施只是一個骨架網站here on my server

有幾個問題，到目前爲止我有：

<div class="container_12"> 
<div class="grid_12"> 
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar --> 

     <ul id='top_menu' class='grid_5'><!-- start of #top_menu --> 
      <li>Home</li> 
      <li>Fake1</li> 
      <li>Fake2</li> 
      <li>Fake3</li> 
     </ul><!-- end of #top_menu --> 
     <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel --> 

      <li>log in</li> 
      <li>faq</li> 
     </ul><!-- end of #user_panel --> 

    </div><!-- end of #top_bar --> 
</div> 
<div class="clear"></div> 
<div id='title_bar' class="grid_12"> 
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1> 

</div><!-- end .grid_1 --> 
<div class="clear"></div>

我使用的是基於網格12模板，因此每個「行」上的「網格」總數應該爲12.但是，我只能將這兩個元素放在同一「行」上，網格總數加起來最多爲11，而不是12。 #user_panel「的類到」grid_3 prefix4「，然後是th在實際上將這個元素到下一行，這打破了一切。

另一件事，儘管top_bar和title_bar等一級元素位於正確的位置（您可以確認使用方便的Firefox插件gridfox），確切寬度爲940px，嵌套網格不在它們應該位於的位置（離設計位置有點遠）。

我是新來這個CSS網格系統，有沒有更好的方式來管理嵌套元素？我不得不說，在960.gs一些樣本網站是相當令人驚訝地看到任何建議:)

提前感謝！

更新的信息

好吧，基於下面的答案，我認爲它仍然可以使用彩色邊框調試嵌套網格的時候，有一個即興的方式來「欺騙」：

.grid_insider 
{ 
    border : 1px solid red; 
    margin : -1px; /* this will stop the element from 'expanding' its space */ 
}

來源

2010-08-31 Michael Mao

請不要用'對齊：center'這是一個過時的屬性。如果你需要一箇中心的東西，給它一個寬度，並使用'margin：0 auto' – 2010-08-31 10:55:08

@Yi Jiang：感謝您指出這一點，我有點懶惰地使用內聯樣式來對齊h1。當然，我不會使用它的真實網站:) – 2010-08-31 10:56:53

你不應該這樣做，因爲這將覆蓋'.grid_insider'可能已經有的任何邊距。就像我說的，在我看來，「大綱」效果更好。 – 2010-08-31 12:15:51

不確定你是否還沒有意識到，但框架確實提供了嵌套元素的方法。

/* `Grid >> Children (Alpha ~ First, Omega ~ Last) 
------------------------------------------------*/ 

.alpha { 
    margin-left: 0; 
} 

.omega { 
    margin-right: 0; 
}

這將覆蓋他們給所有網格元素的空間，從而使一側的元素靠在它們的容器的兩側。

你需要做的是給左邊的菜單欄alpha類，右邊的omega類。然後，你必須刪除所有你加入到這兩個元素及其容器的邊界。這是因爲CSS float s非常精確，並且如果使元素大於定義的框架，就會中斷。

如果您需要添加邊框，你必須添加一些額外的風格，覆蓋這些並給他們寬度的兩個像素（一個用於邊界兩側）小於它是在框架中定義。

來源

2010-08-31 11:43:58

@易江：感謝您的提示！從來不知道/意識到已經有一個內置的方法來做到這一點...... – 2010-08-31 11:48:33

@Yi Jiang：你說得對，我真的不應該使用彩色邊框來嘗試以這種特殊方式進行調試，必須有更好的方法這樣做的方式:) – 2010-08-31 11:50:05

@Micheal你可以使用'outline'屬性。它的邊框，但實際上並沒有改變元素的寬度。並使用Firebug - 然後您可以用特別的方式編輯頁面*內部您的瀏覽器* :) – 2010-08-31 11:52:08

和一個非常晚的答案....

兼用大綱國界

`outline: 1px solid red;`

或使用盒大小

 .gridInsider { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    }

來源

2012-09-19 13:33:23

回答

相關問題