用CSS佈置浮動和清除的頁面元素

我遇到了頁面佈局的這個問題，我一直在作戰太久而無法繼續看清楚。整體頁面佈局是一個標準的雙列：右邊一個窄列（主要列爲float: right），其餘頁面爲主要區域。用CSS佈置浮動和清除的頁面元素

現在，在主區域內，我有一段內容需要沿着主區域的右邊緣漂浮 - 這很好。然而，我需要將一些內容放在主要區域的浮動部分的下方，但不是在右邊的右邊 - 我只是無法弄清楚如何去做。

這裏有我想要做的jsfiddle：http://jsfiddle.net/rx7Pd/

任何幫助是極大的讚賞。

來源

2012-05-15 Aleks G

草圖可能會使您的設計目標更清晰。 –

使用'

'會傷害你的自尊嗎?-) –

@Barry，它會傷害*整個Internet *使用表格。你想要粉色部分下的藍綠色部分嗎？ –

回答

將overflow: auto或overflow: hidden添加到主容器。

更新例如：http://jsfiddle.net/TT8QF/

這是關係到清除浮動的div共同修復。你可以找到一些信息here和here。

如果您也在父元素上使用此修補程序，則可以清除HTML代碼底部的醜陋清除div。只是看到：

更新例如：http://jsfiddle.net/bNS98/

來源

2012-05-15 16:05:31

是的，看起來像我需要的東西。你是否會重新調整這個IE7（我受到政府客戶的要求限制）？ –

我不是100％確定，但我認爲它也適用於IE6。去嘗試一下。 –

嗯......我只是在主區域添加了「overflow：auto」 - 並且在該div上添加了完全冗餘的滾動條 - 什麼給了？ –

你要這樣呢？ (online demo)

enter image description here

爲主要內容的包裝，並使用它display: table-cell是這招的主要思路：

HTML

/* full html markup is on my demo */ 
    … 
    <div class="right-main"> 
      right-floating part of main area. 
    </div> 
    <div id="content"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget risus libero. Nunc ornare pretium quam, a blandit magna suscipit viverra. Sed eu metus ut justo viverra tempus id in magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vitae eros nec mauris vestibulum dictum. 
    </div> 
    <div id="rest"> 
     I want this to be below the main 
     right column but not below the 
     overall right column 
    </div> 
    …

CSS

/* full css code is on my demo */ 
… 
#content { 
    display: table-cell 
} 
…

來源

2012-05-15 16:29:27

相關問題