如何让一个 div 显示在另一个 div 下方，并在其周围显示文字？答案

【问题标题】：How do I get a div to show underneath another one with text flowing around it?如何让一个 div 显示在另一个 div 下方，并在其周围显示文字？
【发布时间】：2014-02-11 04:17:30
【问题描述】：

我遇到的问题是我有一张图片、一个图片来源和一个图片说明。当我将图像设置为不对齐时，它显示正常。但是对于垂直图像，当我将对齐设置为向右或向左时，标题分别显示在图像的左侧或右侧，而不是在其下方。

这是一个问题示例：http://ndsmcobserver.com/2014/01/van-de-casteele-drafted/

相关的代码是：

<div id="attachment_677" style="width: 442px" class="wp-caption alignnone">
    <div class="media-credit-container alignright">
        <a href="http://cdn.ndsmcobserver.com/wp-content/uploads/2014/01/20131124-Van-de-Casteele-vs-Wisconsin-Barbara-Kazanowska.jpg">
        <img class="size-medium wp-image-677" alt="Former Irish center back Grant Van De Casteele passes in Notre Dame’s 4-0 win Nov. 24, 2013, against Wisconsin. Casteele was drafted by the Colorado Rapids in the first round of the MLS draft Thursday." src="http://cdn.ndsmcobserver.com/wp-content/uploads/2014/01/20131124-Van-de-Casteele-vs-Wisconsin-Barbara-Kazanowska-432x525.jpg" width="432" height="525" scale="0">
        </a><span class="media-credit">Barbara Kazanowska</span>
    </div>
    <p class="wp-caption-text">Former Irish center back Grant Van De Casteele passes in Notre Dame’s 4-0 win Nov. 24, 2013, against Wisconsin. Casteele was drafted by the Colorado Rapids in the first round of the MLS draft Thursday.
    </p>
</div>

谢谢大家！

【问题讨论】：

标签： html css image wordpress

【解决方案1】：

我认为问题在于包装容器的宽度，在本例中为“attachment_677”。有一个宽度：auto !important，因此容器使用了所有可用空间。如果删除此属性，它会从样式属性中获取宽度，并且文本位于图像下方。

【讨论】：

【解决方案2】：

听起来你总是希望你的图片、信用和标题显示在另一个下方，因此它们应该始终包含在同一个div 中是有道理的。因此，我会进行以下两项更改：

将您的标题移动到您的 media-credit-container div 中
出于MichaB 中提到的原因，取出您的顶级div。

这应该会导致文章文本按预期换行，无论您是想将图像向左、向右还是根本不浮动。

<div style="width: 442px" class="media-credit-container alignright">
  <a href="http://cdn.ndsmcobserver.com/wp-content/uploads/2014/01/20131124-Van-de-Casteele-vs-Wisconsin-Barbara-Kazanowska.jpg">
    <img class="size-medium wp-image-677" alt="Former Irish center back Grant Van De Casteele passes in Notre Dame’s 4-0 win Nov. 24, 2013, against Wisconsin. Casteele was drafted by the Colorado Rapids in the first round of the MLS draft Thursday." src="http://cdn.ndsmcobserver.com/wp-content/uploads/2014/01/20131124-Van-de-Casteele-vs-Wisconsin-Barbara-Kazanowska-432x525.jpg" width="432" height="525" scale="0"></img>
  </a>
  <span class="media-credit">Barbara Kazanowska</span>
  <p class="wp-caption-text">Former Irish center back Grant Van De Casteele passes in Notre Dame’s 4-0 win Nov. 24, 2013, against Wisconsin. Casteele was drafted by the Colorado Rapids in the first round of the MLS draft Thursday.
  </p>
</div>

【讨论】：

【解决方案3】：

通过分别将 float:left 或 float:right 添加到 .wp-caption.alignright（或 .alignleft）来解决问题。我还按照 MichaB 的建议删除了 auto !important

单独删除 auto !important 并不能解决问题，因为文本不会换行，并且更改 HTML 本身不是一个选项，因为它是由 WordPress 和 Media Credit 插件生成的。

谢谢大家！

【讨论】：