2012-01-10 166 views
4

我需要一些幫助來構建靈活的html佈局。我已經定義了頁面的最小和最大寬度wrap。在wrap裏面,我有兩列,分別是contentrightCSS最小寬度和最大寬度以及靈活佈局

我想要固定寬度right列。但是,我想使寬度變得靈活,所以根據最小寬度和最大寬度,寬度應該增大或減小。

這裏是我的HTML結構:

<body> 
    <div class="wrap"> 
     <div class="content">...</div> 
     <div class="right">...</div> 
    </div> 
</body> 

這裏的CSS,我想:

.wrap{ 
    min-width: 780px; 
    max-width: 1140px; 
    margin: 10px auto; 
} 

.right{ 
    float:left 
    width: 200px; 
} 

.content{ 
    float: left; 
    width: ?? //what should i do here? 

} 

回答

10

在CSS中創建浮動列時,需要學習一些東西。

首先,容器(在你的情況.wrap)也應爲花車清除。這裏有一個很好的關於「clearfix」的Stackoverflow問題。 「Clearfix-ing」將確保容器高度將拉伸以匹配最長的浮動列。用於做「虛擬列」設計。

What methods of ‘clearfix’ can I use?

,是需要知道有多少列,你看怎麼辦? 2列? 3列?

有不同的方式皮膚那隻貓。您可以執行2列,然後再將這些列中的一列再劃分爲2列布局。或者你可以放3個塊容器,並將它們各自浮動到總寬度的百分比。 IE瀏覽器。對於3列布局,理論上每個佈局需要33.33%的寬度(取決於你想如何做排水溝或邊距)。

第三,你說說「靈活佈局」。那麼,靈活的佈局不能使用像素寬度,因爲像素是靜態值。 IE瀏覽器。如果你說寬度是200px,那麼它總是200px,不管你的容器或窗口有多大或多小。

你需要做的是使用百分比。當然,要做一個正確的靈活佈局,你想有一個基本維度。所以,你需要有一個固定的設計,你會說你的「最佳設計」(我必須鬆散地使用這個術語,因爲大多數情況下,真正靈活和響應性的設計應該看起來不錯)。

因此,可以說你的設計被設置爲主要內容區域.wrap爲1000px。您需要使用黃金比例的2列布局。 http://en.wikipedia.org/wiki/Golden_ratio

基本上,你想要一列是618px,另一列是1000px-618px = 382px。

對於CSS,您需要按百分比設置它們。要獲得父寬度的百分比並將其除以所需的寬度。

618px/1000像素= 0.618 * 100(爲百分比)= 61.8%

382px/1000像素= 0.382 * 100(爲百分比)= 38.2%

.left { 
    float: left; 
    width: 61.8% 
} 

.right { 
    float: right; 
    width: 38.2% 
} 

約瑟夫西爾伯是正確的,你不需要需要浮動右列,但不這樣做可能會導致其他意想不到的問題,如框模型的行爲和環繞浮動左項目,尤其是如果一個比另一個短。

您可以應用邊距來將一列抵消到另一列的寬度,但我發現只是很混亂,並且在瀏覽器中仍然存在CSS實現不佳的問題(就像我說我不支持IE6現在,它仍然被我們的訪問者用來支持它)。

另請注意,在處理%時,會遇到舍入錯誤。某些瀏覽器在達到「.5%」時會下降或上升。這可能會導致您的浮動列進行換行,因爲它比容器元素大1px。所以,爲了安全起見,您可能需要削減一點寬度,以便爲您提供1-2像素的包裝緩衝區。

一個常見的方法是在10px的左列和右列之間給出一個「空」的排水溝或邊界。而10px的在我們的設計是:

10px的/ 1000像素= 0.01 * 100(爲百分比)= 1%

您現在可以0.5折每列或採取全1分折一列。我會稍後再做。

.left { 
    float: left; 
    width: 60.8% /* removed 1% to give a gutter between columns */ 
} 

.right { 
    float: right; 
    width: 38.2% 
} 

這現在給你一個很好的安全區,你將避免舍入誤差。

此外,現在我們正在以%工作,佈局將變得流暢。您的2列將重新調整您的瀏覽器的大小,直到您達到最小/最大像素值。

另外,不要忘了「clearfix」

<div class="wrap clearfix"> 

    <div class="left"> 
     <!-- content --> 
    </div> 

    <div class="right"> 
     <!-- content --> 
    </div> 

</div> 

有,當然,有很多其他因素的流體/靈活的電網打交道時,要考慮到。

你可以做的一件事情不是重新創建輪子,而是使用像雅虎這樣的CSS框架。或藍圖。我相信他們有這些內置的並且經過了嚴格的測試。

此外,我建議閱讀響應式網頁設計。這裏有一個A List Apart文章:http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte(另一篇文章和ALA網站發佈)寫的一本書,這本書很棒。

這本書唯一真正的缺點是它沒有涵蓋響應式設計的缺點,以及儘管「酷」的因素,許多大牌網頁設計師/開發人員仍然選擇使用單獨的移動/桌面網站設計。

這是一個輕微的話題,因爲最初的問題只是談論流體設計而不是媒體目標大小。

希望有幫助!

乾杯!

+1

他想要一個固定寬度的列,你的答案不允許這樣做。 – Michael 2015-01-07 01:05:35

3

HTML:

<body> 
    <div class="wrap"> 
     <div class="right">...</div> 
     <div class="content">...</div> 
    </div> 
</body> 

CSS:

.right { 
    float: right; 
    width: 200px; 
} 

.content { 
    padding-right: 200px; /* or margin */ 
    /* No need to float this */ 
} 
+0

如果我把內容放在HTML的正確div之前,爲什麼它不能正常工作?我應該如何做這項工作?謝謝 – user1117313 2012-01-11 08:54:51

+1

@ user1117313 - 不幸的是,這是不依賴於JavaScript的唯一方法。 – 2012-01-11 15:31:22