Css 为什么文本没有对齐顶部？

我有一个文本块在一个浮动到右边的div中。div应该与顶部对齐，但它已经下降了约100px。请参见此处红花旁边的文本框：

我尝试了绝对定位，但当我这样做的背景图像消失。文本的位置应该很明显，但不会正确对齐

以下是html：

<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3><a href="#">Headline</a></h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" /> 
</div>
</div>
</div><!-- end small box -->

任何帮助使其与顶部正确对齐的人都将不胜感激

            { width: 300px; float: right; margin: 0 30px 0 0; } 

---

对我来说，它确实起到了预期的作用。看一看。这看起来不是你想要达到的吗？如果没有，请提供更多信息，最好是我们可以看到问题的在线版本的链接

在线示例之后更新

因此，在您给出的示例中，当发生以下情况时，会出现清算问题：

#r-box-lower

使用

clear:right

#r-box-lower

与

#small-box

位于相同的DOM级别，其中包含移动奇怪的文本块

由于第1页和第2页的原因，

#文本框

被

#r-box-lower

清除，使其从

#r-box-lower

开始的地方开始

因此，要解决此问题，您需要将

#right box

和

r-box-lower

包装到一个共享div中，如：

<div id="right-column" style="float: right; width: 192px">
    <div id="right-box">
        …
    </div>
    <div id="r-box-lower">
        …
    </div>
</div>

…
…

---

当然，您希望将这些内联样式移动到样式表中。

您刚刚发布了一个指向您自己硬盘的链接。事情不是这样的。为什么有人会否决这个问题？我想如果你投了反对票，你应该评论一下原因，这样海报就知道了，以备将来参考。你有网页的URL吗，这样我们就可以全面查看它了？更正了网页链接。很抱歉。或者显示：内联块，如果你不需要支持旧的IEST，它工作得很好。为什么显示：桌子有区别？友好的交谈，我不知道。凭经验我知道你在说什么。正是框的划分阻止了文本。

#small-box-bot => display: table;

img.small-box-photo => float: left;

#small-box-bot => display: table;

img.small-box-photo => float: left;