html - 如何让文本在图像结束后保持缩进

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 4 年前。

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

最佳答案

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

这是一个更新的 fiddler :http://jsfiddle.net/F7JzJ/1/

关于html - 如何让文本在图像结束后保持缩进，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12441472/