用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

用CSS布置浮动和清除的页面元素

回答

相关问题