Align image with text

Asked

Viewed 4,198 times

2

How can I have a result like this?

inserir a descrição da imagem aqui

I need to add those lines like in the image, and leave Tags (which is an image) aligned with the text, as in the example.

<div>
   <img src="<?php echo IMAGEPATH; ?>services/tag.jpg">
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
   </p>
</div>
html css

  • Lines will be images, right? @GWER

  • @williamhk2 Lines no. I do not know if it is possible to do this without being an image...

  • I’ll respond considering they are images, so if I find here a method to do this using css I change the answer.

  • Beauty, in the waiting!

  • 1

    Opa @GWER, I noticed that none of the answers put the margins you mentioned, but I believe that answer the main question that is the alignment of the image, so follow a link to study some possibilities in CSS: http://www.paulund.co.uk/creating-Different-css3-box-Shadows-effects . ;)

3 answers

7


GWER, I tried to do as close as you need. I’m putting the CSS code below. On the margin, you can place an image. If this is not possible, I found some content on gradient edges in the Stack (in English) that can help you. 

.tudo {
    width: 600px;
}
.tudo img {
    float: left;
}
.tudo p {
    padding-left: 140px;
}
<div class="tudo">
   <img src="http://multnix.com/stack/tags.png">
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor.         
   </p>
</div>

3

@GWER You can try to put the image in one column and the text in another so to speak... Since the columns would be Ivs, like this:

<div>
    <div id="col1" style="float:left; height:200px;">
        <img src="<?php echo IMAGEPATH; ?>services/tag.jpg">
    </div>
    <div id="col2" style="float:left">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem, efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
        </p>
    </div>
</div>

Being that in the "#col1", you put the height necessary (not exactly the 200px I put) so that the text does not invade the area below the image Tags. Understands?

I think this will solve the problem. Test and let me know.

1

Put a style="float:left" in the image. If you want a larger spacing between image and text put a padding in this style (remembering that it should be in a separate css, I did it in the tag itself to be more readable and compact).

<div>
   <img src="<?php echo IMAGEPATH; ?>services/tag.jpg" style="float:left">
   <p style="padding-left:70px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
   </p>
</div>

  • Thanks for the reply Ricardo! But with the float still part of the text goes down the image...

  • Only if the window is too small.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.