Question

我想为ul列表中的每个元素显示右侧的图像（照片）。这张照片是实际照片的缩略图链接。列表本身包含1行最多4行文本。总可用宽度大约为600到800像素。

这是我尝试过的，但是清除不会低于图像，因此下一个列表项不会从上一张图像下方开始：

<div style="float:right; width:80px;">
    <a class="thickbox" href="2013.jpg" ><img src="2013.jpg" /></a>
</div>
<ul>
    <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines. </li>
</ul>

<div style="clear: right; float:right; width:80px;">
    <a class="thickbox" href="2014.jpg" ><img src="2014.jpg" /></a>
</div>
<ul>
    <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines. </li>
</ul>

Answer 1

由于您将文本和图像视为一个组，因此将它们包装在像div这样的元素中是有意义的，然后清除它。

<强> jsFiddle example

<div class="clear">
    <div style="float:right; width:80px;"> <a class="thickbox" href="2013.jpg"><img src="http://www.placekitten.com/80/200" /></a>

    </div>
    <ul>
        <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines.</li>
    </ul>
</div>
<div class="clear">
    <div style="clear: right; float:right; width:80px;"> <a class="thickbox" href="2014.jpg"><img src="http://www.placekitten.com/80/200" /></a>

    </div>
    <ul>
        <li>Some long text spanning across several lines. Some long text spanning across several lines. Some long text spanning across several lines.</li>
    </ul>
</div>
.clear {
    clear:both;
}

列表右侧的位置图像

1 个答案: