Question

以下内容的预期行为是什么？

<div id="navi" style="float:left;width:230px">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

<div id="content" style="float: left">
    <div id="diagram" style="float: right"><img src="..." /></div>

    <div id="text">
     <h1>...</h1>
     <h2>...</h2>
     <p>...</p>
    </div>
</div>

我正在尝试创建一个2列页面，内容div中嵌套的第3列向右浮动以显示图表图像。

但是，浏览器渲染所有chrome，ff和ie似乎不一致。由于<p>内容很多，即使在24英寸宽的屏幕上也可以填充很宽的空间。根据我打开浏览器的显示器/分辨率，浏览器可以渲染3列（所需）或者导航在顶部，下面的内容div与文本和图表并排。

如何在不使用表的情况下使其始终显示3列并且文本div具有“流体/弹簧宽度”？最好只是div和css定位。

Answer 1

您必须将宽度指定为百分比（您可以始终使用偶数最小宽度来设置页面的最小宽度并避免错误的视图）

Answer 2

我确信这是您想要实现的目标，请在jsFiddle

查看

CSS float 3 div列呈现不一致，取决于屏幕大小

2 个答案: