右側浮動側邊欄主要內容流動 - 如何？

我想創建一個網頁佈局，其中側邊欄位於右側，主要內容位於側邊欄。右側浮動側邊欄主要內容流動 - 如何？

要求：側邊欄下方

內容應占據所有可用的寬度
當它擊中邊欄的
主要內容應先左側邊欄中下面的內容應該不換標記中的邊欄
邊欄具有固定寬度但未知/可變高度
僅限CSS - 無JavaScript解決方案納秒

這可以在沒有第三個要求來實現：如果邊欄是在標記的主要內容之前和是相同的含元素中，一個簡單的右浮動做這項工作。標記中的主要內容之前的側欄不是此處的選項。側邊欄將包含補充信息和廣告。如果這是標記中的主要內容之前，那麼對於無CSSless瀏覽器和屏幕閱讀器用戶（即使使用「跳轉到...」鏈接）也會很煩人。

這可以在沒有第四個要求的情況下實現。如果側邊欄有一個固定的高度，我可以在主要內容之前放置一個容納元素，將其右側浮動並給予合適的寬度和高度，然後使用絕對定位將側邊欄放置在預製空間的頂部。

示例標記（不包括CSS，只有相關的位）：

<body> 
    <div id="content"> 
    <p> 
     Lorem ipsum .... 
    </p> 
    <p> 
     Pellentesque .... 
    </p> 
    <div id="sidebar"> 
     /* has some form of fixed width */ 
    </div> 
    </div> 
</body>

佈局例：

alt text http://webignition.net/images/layoutexample.png

我不知道這是可能的。我很高興接受一個權威性的回答，說明這是無法實現的。如果這不能實現，我會很感激一個解釋 - 知道爲什麼它不能實現比僅僅被告知它不能實現更有價值。

更新：我很高興看到不符合所有五項要求的答案，只要答案指出哪些要求被忽略，以及忽略忽略要求的後果（利弊）。然後我可以做出明智的妥協。

更新2：我不能忽略要求3 - 側邊欄不能在內容之前。

來源

2008-11-06 Jon Cram

簡單的浮動W /相反的源順序不能完成（沒有CSS3草稿規範）。務實的做法是首先建立一個不錯的佈局，以支持你想要的源訂單。 HTML：

<div id="content" class="noJs"> 
    <div id="floatSpace"></div> 
    <p>Lorem ipsum ....</p> 
    <p>Pellentesque ....</p> 
    <div id="sidebar">content</div> 
</div>

CSS：

#content {position:relative;} 
#sidebar {width:150px; position:absolute; top:0; right:0;} 
.noJs {padding-right:150px;} 
.noJs #floatSpace {display:none;} 
.js #floatSpace {float:right; width:150px;}

這滿足所有，但1和2。現在，我們將添加JS：

$(function() { 
    // make floatSpace the same height as sidebar 
    $('#floatSpace').height($('#sidebar').height()); 
    // trigger alternate layout 
    $('#content')[0].className = 'js'; 
});

這將使內容漂浮#floatSpace，並且#sidebar將保持位於其上。這比移動#sidebar更好，因爲源順序保持不變（對於支持Javascript的屏幕閱讀器等）。

這是JSFiddle of this in action。這種佈局確實伴隨着保持floatSpace高度與邊欄高度同步的不幸要求。如果側欄是動態的或者延遲加載內容，則必須重新同步。

來源

2008-11-06 14:17:17

[jsfiddle]（http://jsfiddle.net/Matte_000/sdo2x966/） – Matmarbon 2014-08-08 08:38:06

我相信你必須改變這個順序，把側邊欄放在第一位。然後，使用CSS的float屬性（在不更改訂單的情況下，div#sidebar將最終落在段落下方vs旁邊）。 div#sidebar應根據需要拉伸高度。

CSS：

#sidebar { 
    float: right; 
    width: 50px; 
}

HTML：

<body> 
    <div id="content"> 
    <div id="sidebar"> 
     /* has some form of fixed width */ 
    </div> 

    <!-- paragraphs --> 
    </div> 
</body>

@喬恩克拉姆[評論]

好的... NVM。你陳述了你自己的答案，並同時拒絕了它。

您不能在其之前定義的其他元素上浮動元素。瀏覽器必須能夠回答「圍繞什麼漂浮？」它看起來要開始的下一個元素，儘可能地繼續。

來源

2008-11-06 09:57:30

對不起，請查看要求：側邊欄不能在標記中的主要內容之前。 – 2008-11-06 10:01:40

如果你可以重新安排你的HTML這樣的側邊欄內容之前，那麼這很簡單：

#sidebar { float: right; width: 150px; }

..然後只需確保在事後收拾它（在#content div的結束）。

我知道你的意圖是在正確的位置，以正確的順序提供內容，但除非你期望視力受損用戶有很多流量，否則我認爲你可能需要重新考慮你的優先級。

來源

2008-11-06 10:01:22 nickf

乾杯尼克 - 我感謝你考慮我的意圖在你的答案。在內容之前加入側邊欄對我來說真的不好。我寧願在內容後面添加側邊欄，也沒有很好地包裝內容。 – 2008-11-06 10:08:21

好的，接下來是另一個答案，因爲我們可以忽略其中一個要求，所以跳過內容在側邊欄下面的第一個要求。

#sidebar { 
    float: left; 
    width: 100px; 
} 
#actualContent { 
    width: 700px; 
    float: left; 
}

你的代碼的唯一變化是，你必須把你的實際內容在另一個包裝。

<div id="content"> 
    <div id="actualContent"> 
     <p>...</p> 
     <p>...</p> 
    </div> 
    <div id="sidebar"> 
     <p>...</p> 
    </div> 
</div>

來源

2008-11-06 10:10:03 nickf

據我所知，得到你想要的側邊欄（沒有明顯的標記重新排序）的唯一方法是設置#content { position: relative; }和#sidebar { position: absolute; right: 0; top: 0; }

不幸的是，絕對定位將採取邊欄出流動的如您所願，#content的佈局和內容將不會避免#sidebar。

來源

2008-11-06 10:10:18

我現在沒有任何地方可以測試它，而且我不確定它是否可以正常工作，但是您是否嘗試將邊欄div顯示爲inline並從那裏開始？

來源

2008-11-06 10:47:32 Gabe

感謝您的建議加布 - 嘗試，但無濟於事。 – 2008-11-06 11:29:37

右側浮動側邊欄主要內容流動 - 如何？

回答

相關問題