CSS：代碼中的內容後的浮動元素

我需要有一個浮動元素後面的內容/文本應該圍繞它在我的代碼爲搜索引擎優化的原因。通常花車完成，像這樣：CSS：代碼中的內容後的浮動元素

CSS：

#menu { 
float: right; 
width: 180px; 
padding: 10px; 
background: #fcc; 
margin: 0 0 15px 15px; 
}

HTML：

<div id="menu">This is a right float. The long text flows around it.</div> 

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Praesent nec risus. 
Praesent adipiscing aliquet magna. Proin bibendum velit 
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p> 
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

但我需要有這樣的HTML：

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Praesent nec risus. 
Praesent adipiscing aliquet magna. Proin bibendum velit 
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p> 
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div> 

<p id="menu">This is a right float. Because it's placed below the text in code, 
it also appears that way.</p>

基本上，我需要這個HTML看起來像前面的例子（HTML和CSS）。我怎樣才能做到這一點？

浮動元素的寬度是恆定的，但高度可以改變。內容必須圍繞它流動。我需要這樣做的原因是因爲浮動元素是菜單，它不包含任何重要的文本，並且通常對於許多頁面都是相同的，所以內容應該在代碼中最上面。

來源

2011-05-09 Zdeněk Gromnica

這最近的問題可以相同

Wrap text around right floated column where left column appears first in html

的解決方案涉及浮空「間隔基」 div右，這間隔區是第一源，它應具有的內容的寬度和高度來在右側 - 在鏈接包括位jQuery的溶液，以獲得高度 - 的位置在浮動間隔物的頂端實際菜單

從該鏈接產生的JS小提琴例如：HERE

來源

2011-05-09 09:09:24 clairesuzy

就是這樣！它需要一個固定的高度，但我可以解決這個問題。謝謝。 – 2011-05-09 09:17:36

酷你不客氣！＆是的，它需要高度，但這個例子也提供了一種方法來檢測;） – clairesuzy 2011-05-09 09:21:12

簡單，你必須添加以下的CSS

#content { 
    float: left; 
    width: 300px; /* put here the width you want */ 
}

演示：http://jsfiddle.net/qTDLr/1/

編輯：確保＃內容和#menu寬度的總和小於容器寬度。

來源

2011-05-09 09:07:32

不，這只是將＃內容放在#menu的左邊。＃內容必須圍繞#menu流動。它必須與我的問題中的第一個例子完全相同。 – 2011-05-09 09:10:31

在兩個html標記中，css將會工作#menu上面或下面的#content – 2011-05-09 09:13:47

或者你是否需要這樣的東西？ http://jsfiddle.net/RyanAdriano/A6p3g/ – 2011-05-09 09:15:03

您可以使用表格。 CSS的內容問題之前的邊欄已經在可訪問性方面向後退了一大步。

來源

2011-06-26 18:13:33 Kevin

CSS：代碼中的內容後的浮動元素

回答

相關問題