固定流體固定佈局960.gs

我們的網站引擎使用960.gs網格系統，我試圖將其修改爲3列固定（100px） - 流體（最大寬度） - 固定（100px）視圖。不幸的是，所有960.gs在線發電機都可以製造完全固定或全流體電網。所以，我想修改最初生成全液力電網這樣的觀點：固定流體固定佈局960.gs

<------------100%---------------> 

======== =============== ======== 
| fixed| |max to screen| |fixed | 
======== =============== ======== 

<-100px>     <-100px>

守則（修改後）： http://jsfiddle.net/vZm8x/

問題1）我不知道如何使中心內容區最大值爲屏幕上的。因爲width：auto;根本不起作用，寬度：100％只是包裝div。
問題2）固定爲100px後，所有div都會繼續打包任何東西。（顯示：內聯;沒有幫助任何想法？）

我的問題是：是否有可能根據我們的需要修改960.gs模板？如果是，請給我任何建議來解決問題？先謝謝你！

來源

2013-03-04 Ken Tang

使用固定寬度的側欄，實際上非常簡單。你會想要使用浮動，並可能需要做一個faux columns技巧，具體取決於你的具體設計需求。

你會想沿着線的東西：

<div class="left"></div> 
<div class="right"></div> 
<div class="middle">Content</div>

和：

div { 
    /* border-box, to make sure "width" is our intended width */ 
    -moz-box-sizing: border-box; /* Firefox still uses prefix */ 
    box-sizing: border-box; 
} 

.left { 
    float: left; 
    width: 100px; 
    background: #f00; 
} 

.right { 
    float: right; 
    width: 100px; 
    background: #00f; 
} 

.middle { 
    width: 100%; 
    padding: 0 100px; 
    background: #ccc; 
}

See it in action here（這是不失禮列效果，但應該給你一個起點）。如果使用輸出更改節的寬度，則會看到列保持放置狀態，並且內容保留在外部列的邊界內。

內容列需要最後一個，因爲它仍然在文檔流中，所以右邊的列最終會在內容的下面。

或者，你可以用在你的身邊列position: absolute;像這樣的東西：

.wrapper { 
    position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */ 
} 

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.middle { 
    padding: 0 100px; 
} 

div { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

這些技巧在IE8 +，火狐，Chrome，Safari和Opera的工作。由於使用W3C盒子模型（「content-box」），IE7可能會遇到問題，並且無法識別box-sizing CSS，但如果需要它可以使there are a few tricks正常工作。 IE6應該沒問題，因爲默認情況下它使用基於「邊界框」的框模型。（您可能需要z-index發揮讓IE瀏覽器的行爲。如果是這樣，那麼設置.middle{ position: relative; z-index: 1}並添加z-index: 2左，右列）。

的position: absolute招確實有優於浮動一個在你的側邊欄可以出現在內容div之前或之後，使其成爲潛在的更多語義選項。

這些工作的原因是因爲a）您的側欄是固定的，所以我們只需將填充設置爲這些欄的寬度，並且b）position: absolute和float: [left/right]將元素從文檔流中取出，這意味着就文件而言，它們不在那裏，並且沒有空間。這允許其他元素移動到那些元素曾經存在的位置，將它們疊加在一起。

來源

2013-03-04 14:18:29 Shauna

固定流體固定佈局960.gs

回答

相關問題