右側浮動側邊欄，主要內容流動 - 如何？
[英]Right-floated sidebar with main content flowed around - how?
問題描述
我想創建一個網頁布局，右側邊欄和側邊欄周圍的主要內容。
要求：
- 側邊欄下方的內容應占用所有可用寬度
- 側邊欄下方的內容在觸及側邊欄左側時不應換行
- 主要內容應位於標記的側邊欄之前
- 邊欄具有固定寬度但未知/可變高度
- 僅限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 - 側邊欄不能在內容之前。
6 個解決方案
解決方案1
3 已采納 2008-11-06 14:17:17
簡單的浮動與相反的源順序是不能完成的（沒有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 。 這種布局確實伴隨着保持floatSpace高度與側邊欄高度同步的不幸要求。 如果側邊欄是動態的或具有延遲加載內容，則必須重新同步。
解決方案2
2 2008-11-06 09:57:30
我相信你必須改變這個順序，把側邊欄放在第一位。 然后，使用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>
@Jon Cram [評論]
好吧... NVM。 你陳述了自己的答案並同時拒絕了。
您不能在其前面定義的其他元素周圍浮動元素。 瀏覽器必須能夠回答“浮動什么？” 它開始尋找下一個要素，並在必要時繼續。
解決方案3
2 2008-11-06 10:10:03
好的，這是另一個答案，因為我們可以忽略其中一個要求，跳過內容包含在側邊欄下面的第一個要求。
#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>
解決方案4
1 2008-11-06 10:01:22
如果您可以重新排列HTML以使側邊欄位於內容之前，那么這很簡單：
#sidebar { float: right; width: 150px; }
..然后確保事后清除它（在#content div的末尾）。
我知道您的意圖是在正確的位置，以正確的順序提供內容，但除非您期望視障用戶的大量流量，否則我認為您可能需要重新考慮您的優先事項。
解決方案5
0 2008-11-06 10:10:18
據我所知，獲取側邊欄所需的唯一方法（沒有明顯的標記重新排序）是設置#content { position: relative; } #content { position: relative; }和#sidebar { position: absolute; right: 0; top: 0; } #sidebar { position: absolute; right: 0; top: 0; }
不幸的是，絕對定位會使側邊欄脫離流動的布局，而#content的內容將無法避免#sidebar 。
解決方案6
0 2008-11-06 10:47:32
我現在沒有任何地方可以測試它，我不確定它是否會起作用，但你是否嘗試將側邊欄顯示為內聯並從那里開始？
當左浮動元素與右浮動元素碰撞時如何清除？
[英]How to clear left-floated element when it collides with a right-floated element?
當左浮動 slider label 顯示兩位數值時，防止右浮動 slider 進一步向右移動
[英]Preventing right-floated slider from moving further right when left-floated slider label displays double digit value
我在頂部和右浮動的 div 之間有一個巨大的差距。 是什么造成了這個巨大的差距？
[英]I have a giant gap between the top and my right-floated div. What is causing this huge gap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.