I am trying to have some text right next to an image in a Google Colab Markdown cell using HTML, but haven't been able to do so.
How can I have it so the text is right beside the image, and I can even change the font size?
You can try your answers by entering them in a Mardown Cell of this notebook.
CodePudding user response:
I would wrap your content (image, text) in a div. The div i would assign to flex. That it...
Update: With inline-style
<div style="display: flex; gap:10px;">
<img src="https://loremflickr.com/320/240" alt="img"/>
<p style="font-size: 30px;">
Here goes the text content.
</p>
</div>
Update 2: with using float
<div style="display: inline; float: left">
<img src="https://loremflickr.com/320/240" alt="img"/>
<p style="float: right; font-size: 30px;">
Here goes the text content.
</p>
</div>
Using Table
<table>
<tr>
<td><img src="https://loremflickr.com/320/240" alt="img"/></td>
<td>Txt</td>
</tr>
</table>
CodePudding user response:
<div style="display:flex;justify-content: space-between;">
<div style="display:inline-block;vertical-align:top;">
<img src="https://loremflickr.com/320/240" alt="img" />
</div>
<div style="display:inline-block;">
<p>
Here goes the text content.
</p>
</div>
</div>