CODEWITHSUNDEEP
htmlcssimage
Jose Ramon
Jose Ramon

Reputation: 5444

Placing images in html

I ve got a div which includes 4 images. I want to place images, one at the bottom of the other with some margin, and next to each image to place a displaying text. I am not sure how to do that. 

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

Upvotes: 0

Views: 199

Answers (4)

BrownEyes
BrownEyes

Reputation: 2287

Using float, clear:both and the correct HTML structure;

You would add a wrapper to each image and text to keep them separated from the other images and text, and add a float:left; to the image and text inside the wrapper, and clearing the floats right after.

(Check out the example on 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;
}

Upvotes: 1

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

You can use float:left for the span

Check this http://jsfiddle.net/mXPee/3/

Upvotes: 1

power_scriptor
power_scriptor

Reputation: 3304

Try this,

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

Upvotes: 0

Peter Frauenknecht
Peter Frauenknecht

Reputation: 1

Use float in css to place text next to the image and clear to place the next picture at the bottom of the first one.

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

Upvotes: 0

Related Questions