make an image and a paragraph sit next to each other
I have a box with an image and some txt and I want the txt to be horizontal to the image. I know this may be a pretty easy question but I can't seem to find a good answer on the interwebs. thanks for any help.
<div id='container'>
<img src='someimage.jpg'/>
<开发者_StackOverflow社区p>some text</p>
</div>
Take a look at CSS's float property, for example:
<div id='container'>
<img src='someimage.jpg' style='float: left;'/>
<p>some text (that will now wrap around the image</p>
</div>
Since Rowland's 2010 answer, CSS has come a long way. Today we have Flexbox which is a part of CSS for controlling layout of elements in a row or column. It has a great deal of flexibility for handling alignment within the box and expanding or shrinking elements to fit.
Here is a simple example of how to style the HTML you provided (with the image URL changed to one that will render here).
#container {
display: flex;
align-items: center;
}
#container p {
margin-left: 1em;
}
<div id='container'>
<img src='http://placekitten.com/100/100' alt="" />
<p>some text</p>
</div>
The MDN tutorial linked above is a good place to learn more.
I recommend you to put the text and the image in a table, in the same row, the image would be in the first column, while the text goes to the second column in the first row . here's the code
<div id='container'>
<table>
<tr>
<td><img src='someimage.jpg'/></td>
<td><p>some text</p></td>
</tr>
</table>
</div>
精彩评论