给定以下html:
<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>
我希望第二个 div 使用页面上剩余的宽度。将宽度设置为 100% 会使其换行,我不知道还要设置什么来修复它。左侧列需要根据其内容调整大小,而右侧则占用剩余的水平空间。
我知道可以使用表格来实现此目的,但在实际应用中,这会导致 IE6 中出现其他问题。在应用程序中,左列是一个树形结构,而其余部分是主视图。树可以折叠。此外,还使用了 Dojo 弹出式 div。当显示和移动弹出式 div 时,表格形式的右列会在 IE6 中扩展以重叠左列。是的,这是 IE 中的一个 bug,因此我正在尝试找到其他布局来解决此问题。使用 divs 可以解决问题,但现在主视图在其他浏览器中无法扩展以填满屏幕。
以下是更好的破碎版本。我需要修复它,以便表格不会扩展页面宽度,并为此添加水平滚动条:
<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>