html - Bar不粘图片css/html

Question

我在使用 CSS 时遇到了问题。当我的图片变得比它旁边的列表小时，图片底部的灰色条 (.meter) 将不再粘在图片上。我不知道如何解决这个问题。我认为这与我需要的 clear 相反，但我无法在互联网上找到它这是 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>

我希望有人能帮助我，在此先感谢。

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 标记上缺少 / 符号。我也更正了演示中的错字。