欄不貼圖片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

只需更改標記中的順序即可：

小提琴

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

我沒有提到，但是您在小提琴中的結束ul標記上缺少/符號。 我也糾正了演示中的錯字。

Answer 2

最簡單的方法是將div放在img之后。 但是，如果您的div不包含任何其他元素，我建議您將其刪除並使用'border-bottom'屬性。

選項1：

<img src="" />
<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>

選項2：

<img src="" class="test"/>

然后在樣式表中

.test {
     border-bottom: 20px solid black;
}