0

我有一个包含 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>
4

4 回答 4

1

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

您将为每个图像和文本添加一个包装，以使它们与其他图像和文本分开，并float:left;在包装​​内的图像和文本中添加一个，然后立即清除浮动。

（查看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;
}
于 2013-10-25T08:52:06.713 回答
1

您可以使用float:left跨度

检查这个http://jsfiddle.net/mXPee/3/

于 2013-10-25T08:59:41.003 回答
0

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

<img src = "1.png" style = "float:left"/>
<p> some text</p>
<img src = "2.png" style = "clear:both;"/>
于 2013-10-25T08:50:37.587 回答
0

尝试这个，

<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>
于 2013-10-25T08:57:58.840 回答