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

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”。有一个 width: auto !important，所以容器会使用所有可用空间。如果您删除此属性，它会从样式属性中获取宽度，而不是文本位于图像下方。