如何在帶有字幕的2行中顯示3個圖像？

Question

如何編寫HTML代碼以在不使用任何庫的情況下在兩行中顯示帶有標題的3行圖像？

下面的代碼顯示了下圖中的網站。

<div class="container"> 

<h2>Project 1: Image Filtering and Hybrid Images</h2> 


<div style="float: right; padding: 10px"> 
<img src="../data/cat.bmp" width="200px" height="100px"/> 
<p style="font-size: 14px"> hybrid image.</p> 
</div> 

<div style="float: right; padding: 10px"> 
<img src="../data/cat.bmp" width="100px" height="100px"/> 
<p style="font-size: 14px"> hybrid image.</p> 
<img src="../data/cat.bmp" width="100px" height="100px" /> 
<p style="font-size: 14px"> hybrid image.</p> 
</div> 
</div> 

但我怎麼能修改上面的代碼顯示如下圖所示的結果？

Answer 1

你需要開始思考盒子。使用框作爲您的內容的容器。我可以在佈局中看到以下框。

你也應該開始添加類，而不是使用內聯CSS，因爲類是更容易閱讀，更容易維護，如果你想要做的任何更改。

如何插入CSS：https://www.w3schools.com/css/css_howto.asp

FLEX（CSS3）：https://www.w3schools.com/cssref/css3_pr_flex.asp

.image-container { 
 
    float: right; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    max-width: 300px; 
 
} 
 

 
.cat-container { 
 
    flex: 1 1 50%; 
 
    padding: 0px 1rem; 
 
    box-sizing: border-box; 
 
} 
 

 
img.cat { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.caption { 
 
    font-size: 14px; 
 
    text-align: center; 
 
}

<h2>Project 1: Image Filtering and Hybrid Images</h2> 
 

 
<div class="image-container"> 
 

 
    <div class="cat-container"> 
 
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" /> 
 
    <p class="caption">hybrid image.</p> 
 
    </div> 
 
    
 
    <div class="cat-container"> 
 
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" /> 
 
    <p class="caption">hybrid image.</p> 
 
    </div> 
 

 
    <div class="cat-container"> 
 
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" /> 
 
    <p class="caption">hybrid image.</p> 
 
    </div> 
 
    
 
</div> 
 

 

 
<p>Bla, bla, bla, bla.</p> 
 

 
<p>Bla, bla, bla, bla.</p> 
 

 
<p>Yada, yada, yada.</p> 
 

 
<p>Bla, bla, bla, bla.</p>

Answer 2

最佳實踐是使用自舉會給您做出響應接口的可能性，你可以查找一些例子here將不會超過一分鐘，以解決您所面臨的問題。