How to fit a grid in HTML
Oi! I'm having trouble assembling a grid with two images + HTML text (it's for a blog post, so I need it to be HTML same).
I need the image of the road to be on the left, with the photo of the sentence on the right, aligned above (with a distance margin of 10px) and the text below (with the same margin).
But I can not, when I mount the HTML it is aligning everything 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>
2 answers
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;
}
:)
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 everyone is occupying the same space, 50% of the screen each, if the images have a very large height it may not look perfect. You can also arrange as you see fit
Read more about it here