开发者

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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜