在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/