如何将文本下移并在图片下方放置标题

Question

我试图弄清楚如何在图片下方放置标题并向下移动文本。我正在尝试将包含第二个无组织列表的文本向下移动。

带有文字“Crazy Baby”的 figcaption 出现在图片的右上方。我的理解是 figcaption 会实现这一点，尽管我显然做错了什么。

<div class="container">
    <div class="jumbotron">
        <div class="text-center">
            <h1>The Golden Babies of 3 Orchard Lane</h1>
            <p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
            <img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
            <figcaption> <em>Snady Babushka</figcaption> </em>
                <font size="5">
                    <ul>
                        <strong> Sandy loved</strong>
                        <li>Her red ball</li>
                        <li>Hiding in her jungle</li>
                        <li> Crossing her paws in an X</li>
                        <li> And most of all her big brother, Jonah </li>
                    </ul>
                </font>
                <br>
        </div>
        <img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
        <figcaption><em>Crazy Baby</figcaption></em>
            <font size="5">
                <ul id="cap">
                    <div class="text-center">
                        <strong>Maya Loves</strong>
                        <li>Tennis balls</li>
                        <li>People more than dogs</li>
                        <li>Greeting someone as they enter the house</li>
                        <li> And of course, her big brother, Jonah</li>
                </ul>
                </div>
            </font>
    </div>
</div>

Answer 1

如果没有看到您的 CSS，我建议您尝试一下。我要做的第一件事是确保您的标签以正确的顺序放置。在您的无序列表中，您的 div 从标签内部开始，但在标签外部结束。

  <ul id="cap">
   <div class="text-center">
   <strong>Maya Loves</strong>
   <li>Tennis balls</li>
   <li>People more than dogs</li>
   <li>Greeting someone as they enter the house</li>
   <li> And of course, her big brother, Jonah</li>
 </ul>
 </div>

应该是这样的

 <div class="text-center">
 <ul id="cap">
   <strong>Maya Loves</strong>
   <li>Tennis balls</li>
   <li>People more than dogs</li>
   <li>Greeting someone as they enter the house</li>
   <li> And of course, her big brother, Jonah</li>
 </ul>
 </div>

然后你可以用那个 div 做什么，给它一个特定的宽度，比如图像的宽度。然后将图像和列表都向左浮动。

 .text-center {
    width: 100px; (Just an example)
 }

 .text-center img,
 .text-center ul {
    float: left;
 }