0

我有一个与 WordPress 中的标题左对齐的图像（代码如下）。<div>底部的标签是动态显示的（一次只显示一个）。当确实显示时，它会超出图像的底部，因此部分文本位于图像的右侧，部分文本一直包裹到左侧，直接位于图像下方。有没有一种简单的方法可以防止它在图像之后向左换行，而无需硬编码换行符？

这是一个粗略的示例（在下拉列表中选择选项 1 或选项 2）：

<div style="margin-top: -50px;">
[caption id="" align="alignleft" width="200"]<a href="LINK">
<img alt="alt" src="LINK" title="title" width="200" height="257"></a>
Click the image to view it full size[/caption]
A bunch of random text.<br>
<br>
<form>
<select id="choices">
    <option value="none">Select an option...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
<div id="option1" class="hide">Option 1 TEXT</div>
<div id="option2" class="hide">Option 2 TEXT</div>
<div id="option3" class="hide">Option 3 TEXT</div>
<div id="option4" class="hide">Option 4 TEXT</div>
<div id="option5" class="hide">Option 5 TEXT</div>
<div id="option6" class="hide">Option 6 TEXT</div>
<div id="option7" class="hide">Option 7 TEXT</div>

JSFIDDLE

4

1 回答 1

1

由于您已经有了img浮动的左侧，并且知道它的宽度，因此最简单的方法是将您想要缩进的所有内容包装在一个 div 中，并将 a 添加margin-left到该包装器 div 中。

这是一个更新的提琴手：http: //jsfiddle.net/F7JzJ/1/

于 2012-09-16T00:37:24.020 回答