How to adjust a grid in HTML

Question

How to adjust a grid in HTML

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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 anyway).

I need the image of the road to be left, with the picture of the phrase on the right, aligned on top (with a distance of 10px) and the text below (with the same margin).

But I can not, when I mount the HTML it gets everything aligned by the center and I can not put the text down 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 imagem grid

asked by anonymous 20.10.2017 / 01:48

2 answers

Convert Roman Numbers [duplicate] PayPal redirection

score 0 · Answer 1

So 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;
}

:)

score 0 · Answer 2

I suggest using the bootstrap so you'll 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 example everyone is 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 any way you like.