html - 栏不粘在图片 css/html 上

Question

我遇到了 CSS 问题。 当我的图像变得小于旁边的列表时，图片底部的灰色条(.meter)将不再粘在图片上。我不知道如何解决这个问题。我认为这与我需要的明确相反，但我在互联网上找不到它 这是 jsFiddle: http://jsfiddle.net/RnSq7/

<img src="http://images7.alphacoders.com/407/407975.jpg" />

<section>
<p>
<ul>
<li>long list</li>    
<ul>
</p>
</section>

<div class="meter"><span style="width: 50%"> </span></div>

我希望 sombeody 可以帮助我，提前致谢。

Answer 1

只需更改标记中的顺序:

<强> FIDDLE

<img src="http://images7.alphacoders.com/407/407975.jpg" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
    <p>
        <ul>
            <li>shalalalala</li>
            <li>shalalalala</li>
            <li>shalalalala</li>
            <li>shalalalala</li>
            ...
        </ul>
    </p>
</section>

我没有提到，但您在 fiddle 的结束 ul 标记上缺少 / 标志。我也在演示中纠正了该拼写错误。