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

Question

The problem I'm having is that I have an image, and an image credit, and an image caption. When I have the image set to no alignment, it displays fine. However for a vertical image, when I have the alignment set to right or left, the caption displays to the left or right, respectively, of the image, instead of below it.

Here's an example of the problem: http://ndsmcobserver.com/2014/01/van-de-casteele-drafted/

The relevant piece of code is:

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

Thanks everyone!

Answer 1

I think the problem is the width of your wrapper-container, in this case "attachment_677". There is a width: auto !important, so the container uses all the space available. If you remove this property it gets the width from the style-attribute and than the text is below the image.

Answer 2

It sounds like you'll always want your image, credit and caption to be displayed one below the other, so it stands to reason that they should always be contained in the same div . I'd therefore make the following two changes:

• Move your caption into your media-credit-container div
• Take out your top-level div for the reasons mentioned by MichaB .

This should result in the article text wrapping as expected, regardless of whether you want to float your image left, right, or not at all.

<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

Ended up fixing the problem by adding float:left or float:right respectively to .wp-caption.alignright (or .alignleft). I also removed auto !important as suggested by MichaB

Removing auto !important alone didn't fix the problem because text wouldn't wrap, and changing the HTML itself wasn't an option because it was generated by WordPress and the Media Credit plugin.

Thanks everyone!