html - 如何将文本环绕在图像周围并将标题保留在图像下方？

Question

我想要一张图片在左边，我的文章包裹在图片周围，我的标题在底部。但是当我输入我的代码时，它最终看起来像这样：

https://i.ibb.co/8Nhk44B/Untitled.png

请注意，标题在顶部而不是图像下方。

我将如何纠正这一点？我为这个相当不祥的话题道歉

.square {}

.square img {
  float: left;
  padding: 0px 20px 20px 0px;
}

.box {
  font-size: x-small;
  vertical-align: top;
  display: inline-block;
  width: 100%;
}

.caption {
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  font-size: x-small;
  position: relative;
}

<div class="card">
  <h2>
    <a href="post003.html" class="h2Title">Is this the skull of Mary Magdalene?</a>
  </h2>
  <h5>Jonathan Milano, <a href="blog.html">May 1, 2021</a></h5>

  <div class="box">
    <div class="square">
      <a href="post003.html">
        <img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on 
    display in France" />
        <p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br> Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink" target="_blank">Magdalene Publishing</a>
        </p>
      </a>


      <p>Although Mary Magdalene’s historic existence is still under debate today, Christian text from sources including the New Testament tell us that Mary of Magdala (her home village on the shore of the Sea of Gailee) played a significant role in the
        life of Jesus Christ and the foundations of Christianity as it is known today.
        <br><br> According to legend, Mary was one of the women that stayed with Jesus even up to crucifixion. She is said to be the first one whom Jesus appeared to after resurrection. Other early Christian texts raise her status even more in that after
        the death of Christ she is considered almost an apostle rivaling the status of Saint Peter.</p>
      <p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common
        version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

选项之一：

为 .caption 添加浮点数和宽度

.square {
}


.square img {
  float: left;
  padding: 0px 20px 20px 0px;
  width:50%;
}


.box {
  font-size: x-small;
  vertical-align: top;
  display: inline-block;
  width: 100%;
  }

.caption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: x-small;
  position: relative;
  float:left;
  width:50%;
  padding:0 20px 0 0;
}
a{color:#333;}

<div class="card">
            <h2><a href="post003.html" class="h2Title">Is this the skull of Mary Magdalene?</a></h2>
            <h5>Jonathan Milano, <a href="blog.html">May 1, 2021</a></h5>

            <div class="box">
              <div class="square">
              
                
                  <a href="post003.html">
                <img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on 
                display in France" /><p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br>
                  Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink" 
                  target="_blank">Magdalene Publishing</a></p></a>
                

                <p>Although Mary Magdalene’s historic existence is still under debate today, Christian 
                  text from sources including the New Testament tell us that Mary of Magdala 
                  (her home village on the shore of the Sea of Gailee) played a significant role 
                  in the life of Jesus Christ and the foundations of Christianity as it is known today.
                  <br><br>
                  According to legend, Mary was one of the women that stayed with Jesus even up to 
                  crucifixion. She is said to be the first one whom Jesus appeared to after resurrection. 
                  Other early Christian texts raise her status even more in that after the death of Christ 
                  she is considered almost an apostle rivaling the status of Saint Peter.</p>
                  <p>The New Testament tells us that the followers of Christ were prosecuted  from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
                
                
                
              
                </div>
                </div>
                </div>