我有一个div包装两列布局的古老问题.我的侧边栏是浮动的,所以我的容器div无法包装内容和侧边栏.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明确错误:
<br clear="all"/>overflow:autooverflow:hidden在我的情况下,唯一似乎正常工作的是<br clear="all"/>解决方案,这有点邋.. overflow:auto给我讨厌的滚动条,overflow:hidden肯定有副作用.此外,IE7显然不应该由于其不正确的行为而遭受这个问题,但在我的情况下,它与Firefox的痛苦相同.
目前我们可以采用哪种方法最强大？
我有一个与此类似的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
当内心的增加时,我希望父母div能够扩大.heightdivheight
编辑:
一个问题是,如果width子内容的内容扩展width到浏览器窗口之外,我当前的CSS会在父项上放置一个水平滚动条div.我希望滚动条位于页面级别.目前我的父div设置为overflow: auto;
你能帮我解决这个问题吗？
做这样的事情时:
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
我必须使用一个空div
clear: both;
对我来说感觉很脏.
那么,有没有一种方法可以在不使用浮动的情况下对齐？
这是我的代码:
.action_buttons_header a.green_button{
}<div class="change_requests_container" style="width:950px !important">
<div class="sidebar">
<a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a>
</div>
<div class="content_container">
<div class="content">
<div class="action_buttons_header">
<a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
margin: 5px 0px 5px auto;
">Apply Changes</a>
</div>
<div id="change_list_container">
<div class="changes_table">
<style type="text/css">
#original_492 .rl_inline_added {
display: none;
}
#492.change_container .actial_suggested_text_container{
display: none;
}
</style>
<div class="content_section_header_container">
<div class="content_section_header">
<a href="#" class="collapse" …div基于漂浮的孩子,我似乎无法自动增长父母的身高div.所有的孩子都漂浮着,水平占据空间,然后包裹到下一行.浮动子项的数量可能会发生变化,父项必须自动调整其高度.(父亲div作为所有浮动div的背景).div在父母下方还有第二个div需要被推下来,因此它低于浮动divs.
解决方案在IE中运行非常重要.