Размещение изображений в формате HTML

Question

Размещение изображений в формате HTML

0

У меня есть div, который включает в себя 4 изображения. Я хочу разместить изображения, один снизу другого с некоторым размахом, и рядом с каждым изображением разместить текст. Я не уверен, как это сделать.

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

Jose Ramon 25 окт. 2013, в 11:16

Источник

Теги:

html

css

image

4 ответа

1

Вы можете использовать float:left for span

Проверьте это http://jsfiddle.net/mXPee/3/

Dinesh Kanivu 25 окт. 2013, в 06:14

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>

power_scriptor 25 окт. 2013, в 07:54

0

Используйте float в css, чтобы поместить текст рядом с изображением и очистить, чтобы разместить следующее изображение в нижней части первого.

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

Peter Frauenknecht 25 окт. 2013, в 06:06

Ещё вопросы

BrownEyes · Accepted Answer · 2013-10-25T06-46-00.000Z

Использование 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;
}