[英]How can I add a caption to this image in css?
我正在建立一個網站,我在移動視圖中有這兩個圖像。 它們的寬度為 30%。 這兩張圖是並排的,像這樣
我想在每張圖片下方添加一個小標題。
<div class = "unique-img1">
<a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc"><img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal"> </a>
<!-- <p class = "caption1"> Three fan model</p> -->
<div>
<div class = "unique-img2">
<a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I"><img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> </a>
<!-- <p class = "caption2"> Tinkercad Link to sailboat model </p> -->
</div>
css:
/* code for images in unique section */
.unique-section img {
float: left;
width: 30%;
height: auto;
}
/* tinkercad image right */
img.tcimg2 {
float: right;
}
.unique-img1 {
float: left;
}
只需取消注釋代碼中的 p 標記即可。 然后它將作為標題。
<div class = "unique-img1">
<a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc"><img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal"> </a>
<p class = "caption1"> Three fan model</p>
</div>
<div class = "unique-img2">
<a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I"><img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> </a>
<p class = "caption2"> Tinkercad Link to sailboat model </p>
</div>
如果您希望您的標題是像您的圖像一樣的超鏈接,只需將 p 標簽放在 img 標簽之后(都在 a 標簽內)。
<div class = "unique-img1">
<a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc">
<img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal">
<p class = "caption1"> Three fan model</p>
</a>
</div>
<div class = "unique-img2">
<a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I">
<img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo">
<p class = "caption2"> Tinkercad Link to sailboat model </p>
</a>
</div>
<div class = "unique-section">
<div class = "unique-img1">
<a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc">
<img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal">
</a>
<p class = "caption1"> Three fan model</p>
<div>
<div class = "unique-img2">
<a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I">
<img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo">
</a>
<p class = "caption2"> Tinkercad Link to sailboat model </p>
</div>
</div>
.unique-section {
display: flex;
justify-content: space-between;
}
.unique-img1,
.unique-img2 {
width: 30%;
}
.unique-sectio img{
width: 100%:
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.