HTML - 执行以下布局的正确方法是什么？

Question

图A可以通过在父TD上具有valign =“top”和align =“right”来实现。红色矩形是一个div，其style =“float：right”。这适用于大多数浏览器，但不适用于IE。 IE将在div之前放置一个换行符。文本未包含在任何标记中。这是TD的第一件事。

图A中的设置问题是通过在Div中使用style =“float：right”包含文本并将该div放在原始红色div之后解决的，从而导致图B中的布局。这似乎可以在所有的浏览器，但我怀疑我正在以正确的方式完成这个布局要求。

有没有更好的方法来实现这一目标？

我不能使用表格，因为右侧的div具有稍微可变的宽度，绿色文本与右侧Div的左侧之间的距离非常重要。基本上，左侧文本的绝对位置取决于右侧div中发生的情况。

Answer 1

您是否尝试过切换doctypes以更好地控制布局？

特别转移到严格的doctypes之一（A List Apart）

<强>更新
添加Daniels link to Wikipedia's文档类型比较。

Answer 2

因此，您的解决方案是将文本和DIV浮动到右侧。这似乎没问题。

另一种方法是在DIV上设置display：inline-block。试试吧。

现场演示： http://www.vidasp.net/tinydemos/div-inside-td.html