How to adjust an HTML grid

Asked

Viewed 1,043 times

1

Hi! I’m having trouble setting up a grid with two images + HTML text (it’s for a blog post, so I need it to be HTML itself).

I need the image of the road to the left, with the photo of the sentence to the right, aligned from above (with a distance margin of 10px) and the text below (with the same margin).

But I can’t, when I assemble the HTML it’s aligning everything by the center and I can’t put the text down from the second image.

The HTML I used:

<table> 
    <tr> 
        <td align="right" widht="50%"><IMG SRC="https://static.tumblr.com/5effaa89329ee96ba67275cc51bb0be2/z1lgkb5/Lu8nwwpgi/tumblr_static_filename_640_v2.jpg" alt=“essa foto precisa ficar alinhada a esquerda“></td> 
       <td align=“left” widht="50%"><IMG SRC="https://i.pinimg.com/736x/ac/7c/b8/ac7cb8dc771754f451a2c404222cea0f--love-quotes-net.jpg" alt=“esse precisa ficar acima do texto“ width:"150px"></td> <BR>
       <td widht="50%"> <mark style="background-color:black; color:white;">Work— </mark> preciso que este texto fique ao lado da imagem da estrada, com a imagem da frase acima dele. </td> 
    </tr> 
</table>
html css image grid

  • To be clear, do you want two columns? The column on the left with the photo and the column on the right with a photo on top of text?

  • @Getuliorafaelferreira now that you have clarified, I deleted the previous comments just to give an organized and I delete this here. Thanks for the return!

  • I may be saying nonsense, but from what I understand if you use grid in CSS should work

2 answers

1

From what I understand my suggestion involves only HTML and CSS.

HTML:

    <p class="paragrafo">
    <img class="minha-image"  src="" width="100" height="100"/>
    Nunc pulvinar lacus id purus ultrices id sagittis neque 
convallis. Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. 
Duis imperdiet mi id lorem pellentesque tempus. Ut nterdum 
molestie ornare tellus consectetur.
    </p>

CSS:

.minha-image{
  float: left;
  margin: 0px 15px 0px 0px;
}
.paragrafo{
  clear: left;
}

:)

0

I suggest using bootstrap so it will be responsive:

<img alt="" src="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img alt="" src="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-6">texto</p>

In this exeplo all are occupying the same space, 50% of the screen each, if the images have a very large height may not be perfect. You can also arrange it the way you think best

Read more about this here

Browser other questions tagged html css image grid

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