CSS min-width和max-width以及靈活的布局

Question

我需要一些幫助來構建靈活的html布局。 我已經定義了頁面wrap最小和最大寬度。 在wrap ，我有兩列， content和right 。

我想要固定寬度right列。 但是，我想使content寬度靈活，因此根據最小寬度和最大寬度，其寬度應該增加或減少。

這是我的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?

}

Answer 1

在CSS中創建浮動列時，需要學習一些內容。

首先，還應清除容器（在您的情況下為.wrap ）以用於浮動。 這是關於“clearfix”的一個很好的Stackoverflow問題。 “Clearfix-ing”將確保容器高度伸展以匹配最長的浮動柱。 用於做“人造柱”設計。

我可以使用哪種'clearfix'方法？

其次，需要知道你想要做多少列？ 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 / 1000px = .618 * 100（百分比）= 61.8％

382px / 1000px = .382 * 100（百分比）= 38.2％

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

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

約瑟夫西爾伯是正確的，你不需要浮動右列，但不這樣做可能導致其他意外的問題，如框模型的行為和包裹浮動的左項目，特別是如果一個比另一個短。

您可以應用一個邊距來將一列偏移到另一列寬度，但我發現這只是一團糟而且瀏覽器中的CSS實現可能仍然存在問題（就像我說的那樣我不再支持IE6了，它仍然是我們的訪客使用它足以支持它）。

另請注意，處理％時會遇到舍入錯誤。 某些瀏覽器在達到“.5％”時會向下或向上舍入。 這可能會導致浮動列換行，因為它比容器元素大1px。 因此，為了安全起見，您可能希望剃掉一點寬度，以便為包裝提供1-2px的緩沖區。

一種常見的方法是在左側和右側列之間給出一個“空”的溝槽或邊距，例如10px。 我們的設計中10px是：

10px / 1000px = 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>

當然，在處理流體/柔性網格時需要考慮很多其他因素。

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

另外，我建議閱讀響應式網頁設計。 有一篇關於它的A List Apart文章： http ： //www.alistapart.com/articles/responsive-web-design/以及Ethan Marcotte撰寫的一本書（該文章的另一篇並由ALA網站發布）讀起來很棒。

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

這是一個輕微的偏離主題，因為最初的問題只是談論流體設計而不是媒體目標大小。

希望有所幫助！

干杯!

Answer 2

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 */
}

CSS min-width和max-width以及靈活的布局

問題描述

2 個解決方案

解決方案1
10 已采納 2012-01-10 15:38:43

解決方案2
3 2012-01-10 14:53:42

CSS min-width和max-width以及靈活的布局

問題描述

2 個解決方案

解決方案1 10 已采納 2012-01-10 15:38:43

解決方案2 3 2012-01-10 14:53:42

解決方案1
10 已采納 2012-01-10 15:38:43

解決方案2
3 2012-01-10 14:53:42