如何使< img>标签水平地排列在div？ [英] How to make the <img> tags line up horizontally in the div?

问题描述

我需要使图像在div中水平并排显示。

HTML ：

 < div class =Wrapper> 
< img src =/ wp-content / uploads / 2012/07 / TFT.pngalt =Smiley faceheight =90width =95/> 
< img src =/ wp-content / uploads / 2012/07 / Ltyt.pngalt =Smiley faceheight =90width =95/> 
< img src =/ wp-content / uploads / 2012/07 / artspngalt =Smiley faceheight =90width =95/> 
< / div> 
  

参考： jsFiddle

解决方案

您也可以使用css属性 display ：inline-block 或 float：left 来实现。

HTML代码

 < div> 
< img ... /> 
< img ... /> 
< img ... /> 
< / div> 
  

CSS代码

  div img {display：inline-block;} 
  

或

  div img {display：block; float：left; margin-right：5px;} 
  pre> 
I need to make the images show up side by side horizontally in the div. How can I do that?

HTML:
    
<div class="Wrapper">
  <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
解决方案
You could also use css properties display:inline-block or float : left to achieve this.

HTML Code
<div>
    <img ... />
    <img ... />
    <img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}


                        
这篇关于如何使&lt; img&gt;标签水平地排列在div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！