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

您可以使用float:left作为范围

选中此http://jsfiddle.net/mXPee/3/

Answer 3

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

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

Answer 4

试试这个，

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

将图像放在html中

4 个答案: