html - 在html中放置图像

Question

我有一个包含 4 张图片的 div。我想放置图像，一个在另一个底部有一些边距，然后在每个图像旁边放置一个显示文本。我不知道该怎么做。

<div class = 'debug' style = " float: left; margin-left: 50px;">
        <p> &nbsp User &nbsp accounts</p>
        <span><img src = "1.png" style = "height:70px; width: 70px; 
         margin-bottom:40px;">
         <br> Tweeter
        </span>
        <span>
        <img src = "2.png" style = "height:70px; width: 70px; 
        margin-bottom:40px; ">
         <br> Tweeter
        </span>
        <span>
        <img src = "3.png" style = "height:70px; width: 70px; 
        margin-bottom:40px;">
         <br> Tweeter
        </span>
        <span>
        <img src = "4.png" style = "height:70px; width: 70px;  margin-bottom:40px;">
         <br> Tweeter
        </span>
    </div>

Answer 1

使用float、clear:both和正确的HTML结构；

您可以为每个图像和文本添加一个包装器，使它们与其他图像和文本分开，并向包装器内的图像和文本添加一个 float:left;，并清除紧随其后。

(查看 example 上的 JSFiddle )

HTML:

<div class="debug" style="float: left; margin-left: 50px;">
    <p> &nbsp User &nbsp accounts</p>
    <div class="row">
        <img src = "1.png" style = "height:70px; width: 70px;margin-bottom:40px;"/>
        <div class="text">Tweeter</div>
        <div class="clear"></div>
     </div>
    <div class="row">
        <img src = "2.png" style = "height:70px; width: 70px;margin-bottom:40px; "/>
        <div class="text">Tweeter</div>
        <div class="clear"></div>
     </div>
     <div class="row">
        <img src = "3.png" style = "height:70px; width: 70px;margin-bottom:40px;"/>
        <div class="text">Tweeter</div>
         <div class="clear"></div>
      </div>
      <div class="row">
          <img src = "4.png" style = "height:70px; width: 70px;margin-bottom:40px;"/>
          <div class="text">Tweeter</div>
          <div class="clear"></div>
       </div>
 </div>

CSS:

.debug img{
    float:left;
    margin-right:5px;
}
.text{
    float:left;
}
.clear{
    clear:both;
}