我如何把我的文字围绕我的图像,并保持我的标题在图像下面?

  • 本文关键字:图像 标题 文字 html css
  • 更新时间 :
  • 英文 :


我想要一个图像在左边,我的文章围绕着图像和我的标题在底部。但是当我输入代码时,它最终看起来像这样:

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>

选项之一:

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

另一个选项:

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

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



<h5>Jonathan Milano, <a href="blog.html">May 1, 2021</a></h5>
</div>
</div>
</div>

最新更新