Question

如何将2张图片放在一起？我必须使用CSS还是HTML？

        <!DOCTYPE html>
 <html>
 <style>
 a:link { color: #D83F33; background-color: transparent; text-decoration: none; } 
 a:visited { color: #D83F33; background-color: transparent; text-decoration: none; } 
 a:hover { color: #D83F33; background-color: transparent; text-decoration: underline; } 
 a:active { color: #D83F33; background-color: transparent; text-decoration: underline; } 
 </style>
 <div align="center">
 <div class=nav1"> 
 <img src="https://reflex-jam.nl/wp-content/uploads/2017/04/Bootcamp-tekst.jpg" alt="E-Sportkleding" /> 
 <p> <a href="https://www.e-sportkleding.nl/html/" target="_blank" style="D83F33">E-sportkleding</a> </p> 
 <img src="https://www.trias-groep.nl/wp-content/uploads/2014/07/logo_norm.png" alt="Trias" /> 
 <p> <a href="http://www.trias-groep.nl" target="_blank" style="D83F33">Trias jeugdhulp</a> </p> 
 </div> 
 </html> 
 </div>

这是我现在的代码。谁能帮帮我？

Answer 1

请修改下面代码段中的html / css，以便将图片放在一起，放入img＆amp; p里面的div请看下面的代码片段，其中我编辑了html＆amp;在.nav1中添加了css以获得所需的结果。

＆＃13;

 a:link { color: #D83F33; background-color: transparent; text-decoration: none; } 
 a:visited { color: #D83F33; background-color: transparent; text-decoration: none; } 
 a:hover { color: #D83F33; background-color: transparent; text-decoration: underline; } 
 a:active { color: #D83F33; background-color: transparent; text-decoration: underline; } 
.nav1{display:inline-block;padding:10px;text-align:center;}

＆＃13;

 <!DOCTYPE html>
 <html>
 <div>
 <div class="nav1"> 
 <img src="https://www.trias-groep.nl/wp-content/uploads/2014/07/logo_norm.png" alt="E-Sportkleding" /> 
 <p> <a href="https://www.e-sportkleding.nl/html/" target="_blank" style="D83F33">E-sportkleding</a> </p> 
 </div> 
 <div class="nav1"> 
 <img src="https://www.trias-groep.nl/wp-content/uploads/2014/07/logo_norm.png" alt="Trias" /> 
 <p> <a href="http://www.trias-groep.nl" target="_blank" style="D83F33">Trias jeugdhulp</a> </p> 
 
 </div> 
 </div> 
 </html>

＆＃13;

Answer 2

将您的img和p包裹在另一个div内，如下所示：

 <div class="nav1">
 <div>
 <img src="https://reflex-jam.nl/wp-content/uploads/2017/04/Bootcamp-tekst.jpg " alt="E-Sportkleding " />
 <p> <a href="https://www.e-sportkleding.nl/html/ " target="_blank " style="D83F33 ">E-sportkleding</a> </p>
 </div>
 <div>
 <img src="https://www.trias-groep.nl/wp-content/uploads/2014/07/logo_norm.png " alt="Trias " />
 <p> <a href="http://www.trias-groep.nl " target="_blank " style="D83F33 ">Trias jeugdhulp</a> </p>
 </div>
 </div>

然后将其添加到您的css或<style>标记：

.nav1 div {
  display: inline-block;
  margin: 0 10px;
}

Wordpress divi HTML内联图片

2 个答案: