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

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

1 个答案: