Question

我遇到的问题是我有图像，图像信用和图像标题。当我将图像设置为无对齐时，它显示正常。然而，对于一个图像垂直，当我有取向设置为右或左，字幕显示到分别向左或向右，，图像的，而不是在其下方。

以下是问题的一个示例：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>

谢谢大家！

Answer 1

我认为问题在于包装容器的宽度，在本例中为“attachment_677”。有一个宽度：auto！important，因此容器使用所有可用空间。如果删除此属性，它将从style-attribute获取宽度，而文本则在图像下方。

Answer 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>

Answer 3

通过将float：left或float：right分别添加到.wp-caption.alignright（或.alignleft）来解决问题。我还删除了MichaB

建议的auto！important

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

谢谢大家！

我如何让一个div显示在另一个带有文字的下方？

3 个答案: