Question

我在div中有一个文本块，它浮动到右边。 div应该与顶部对齐，但它已经下降了大约100px。请参阅此处红色花旁边的文本框：http://174.121.46.122/~flowerwo/inside.html

我尝试过绝对定位，但是当我这样做时，背景图像消失了。显而易见的是文本需要的位置，但它不能正确对齐。

这是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 -->

这是CSS：

#small-box  { 
    width: 625px; 
    position: relative;
    margin: 10px 0 0 5px;
    background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top          { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot          { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }

img.small-box-photo     { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box

任何有助于使其正确对齐顶部的帮助将不胜感激。

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

Answer 1

它确实对我有用。看看this example。它看起来不像你想要达到的目的吗？如果不是，请提供更多信息，最好是我们可以看到问题的在线版本的链接。

在线示例之后更新。

因此，在您给出的示例中，在以下情况下发生清除问题：

#r-box-lower使用clear: right
#r-box-lower位于与#small-box相同的DOM级别，包含奇怪的移位文本块
由于p.1和p.2 #text-box被#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>

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

Answer 2

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

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

为什么文字没有与顶部对齐？

2 个答案: