嘗試通過HTML / CSS中的鏈接並排獲取3張圖像

Question

這是我當前的HTML代碼的片段：

 div.Navbar { margin-left: 10px; margin-right: 10px; } .icons { height: 300px; } 

 <div class="NavBar"> <img src="images/ThumbNails/Conflict.jpg" class="icons" style="float: left; width: 30%; margiwn-right: 1%; margin-bottom: 0.5em;" /> <img src="images/ThumbNails/internationalN.jpg" class="icons" style="float: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" /> <img src="images/ThumbNails/Politics.jpg" class="icons" style="float: right; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" /> </div> 

我使用CSS和HTML進行的所有嘗試，例如在每個單獨的圖像周圍制作div，都使整個過程變得毫無用處……我已經看了堆棧溢出有關如何執行此操作的指南，但再次將所有內容都弄亂了。

tl; dr：使用當前的代碼，圖像位於一條完美的線條中，但是由於線條完美，我無法將鏈接放置在圖片下方。

Answer 1

用div包裝圖像+文本/鏈接是一個很好的起點。 也許您只是忘了將CSS格式從圖像移動到包裝div。

 div.Navbar { margin-left: 10px; margin-right: 10px; } .icons { height: 300px; width: 100%; } .img_container { float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em; text-align: center; } 

 <div class="NavBar"> <div class="img_container"> <img src="https://placehold.it/350x300" class="icons"> <a href="#">link</a> </div> <div class="img_container"> <img src="https://placehold.it/350x300" class="icons"> <a href="#">link</a> </div> <div class="img_container"> <img src="https://placehold.it/350x300" class="icons"> <a href="#">link</a> </div> </div> 

Answer 2

我建議為此使用flexbox：

（更改了圖標的width和height ，以便它們適合插入到代碼段中）

 div.NavBar { display: flex; flex-flow: row wrap; justify-content: center; } .NavBar div { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; } .icons { width: 150px; height: 150px; } 

 <div class="NavBar"> <div> <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> </div> <div> <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> </div> <div> <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> </div> </div>