在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; 
} 

Answer 2

在css中使用float将文本放置在图像旁边，并清除以将下一张图片放置在第一张图片的底部。

<img src = "1.png" style = "float:left"/> 
<p> some text</p> 
<img src = "2.png" style = "clear:both;"/> 

Answer 3

试试这个，

<div> 
    <div style="margin-bottom:40px;"> 
     <span><img src = "1.png" style = "height:70px; width: 70px;"></span><span>Sample Text</span> 
    </div> 
    <div style="margin-bottom:40px;"> 
     <span><img src = "2.png" style = "height:70px; width: 70px;"></span><span>Sample Text</span> 
    </div> 
    <div style="margin-bottom:40px;"> 
     <span><img src = "3.png" style = "height:70px; width: 70px;"></span><span>Sample Text</span> 
    </div> 
    <div style="margin-bottom:40px;"> 
     <span><img src = "4.png" style = "height:70px; width: 70px;"></span><span>Sample Text</span> 
    </div> 
</div> 

Answer 4

您可以使用float:left跨度

检查此http://jsfiddle.net/mXPee/3/