2014-02-21 114 views
0

我公司的網站目前使用固定寬度的960網格系統。有人說流體流向設計,所以我一直在研究流體960網格系統。當涉及到嵌套網格時,是否有辦法讓流體960網格系統的行爲與固定寬度960網格系統的行爲相同?

就我所知,這兩個系統的行爲方式類似,直到你有嵌套的網格。例如,在一個固定寬度的系統:

<div class="grid_12"> 
    <div class="grid_6"> 
     <div class="grid_6"> 
      <p>This paragraph will fill up half the space of the grid_12 div in a 12 column grid.</p> 
     </div> 
    </div> 
</div> 

我的流體960網格系統的理解(和百分比,以及)將是這樣的:

<div class="grid_12"> 
    <div class="grid_6"> 
     <div class="grid_6"> 
      <p>This paragraph will only fill up a quarter the space of the grid_12 div in a 12 column grid, at least as far as I can tell.</p> 
     </div> 
    </div> 
</div> 

現在,我明白,如果我將上面的代碼中最內層的div更改爲grid_12,它的工作原理與第一個例子相同,但該網站有很多頁面,儘管我可以相應地更改嵌套網格的每個實例,但這需要相當長的時間特別是因爲大多數頁面是在我被聘用之前編寫的)。

那麼,有沒有辦法讓流體網格系統中的嵌套工作方式與固定寬度一樣,而不會逐頁改變任何內容?

我懷疑答案是否定的,但我想如果有一種方法我不想這樣做,SO上的人會知道。

回答

1

取決於如何複雜的是你的實際佈局,你可以嘗試這樣做

.grid_6 .grid_6 { width: 100% } 

OFC,你需要添加這些類型選擇至少爲每你在網站上的情況,但我不會推薦它,因爲它不是一個好的解決方案。

可能試着找到一種更適合新規範的新網格/佈局解決方案?

+0

新的解決方案可能是最好的主意,但我不得不承認我沒有想到CSS的解決方法。 – Chris