Question

我有一个图像与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

Answer 1

由于你已经向左移动了img，并知道它的宽度，最简单的方法是将所有你想要缩进的内容包装在div中，并将margin-left添加到该包装器div中。

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

如何在图像结束后使文本保持缩进状态

1 个答案: