尝试通过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>