将多行文字对齐到图像的右侧

Question

I want to make it so that there is an image, and to the right of the image, there is text which should take up just two lines. So, something like this.. The HTML:

<img>
<p>text one</p>
<p>text two</p>

The CSS:

img {
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
}

p {
    display: inline-block;
}

The issue with this is that the two 'p' tags are on the same line. I tried placing a

<br />

in between them but that sends the second 'p' below the image. Is there any way for me to make the two 'p' tags each on their own line? Note: I do not want to put the text inside a div and then give the div a width of, say 200px because I want the text to be exactly two lines regardless of the screen size. (The text is generated by the end user so if the text is long and the div is only 200px then the two 'p' tags might take up more than just two lines).

Here is a fiddle: http://jsfiddle.net/dgh8kf5x/1/

Answer 1

 div { display: inline-block; } img { width: 200px; height: 200px; display: inline-block; vertical-align: top; } 

 <img> <div> <p>Line 1</p> <p>Line 2</p> </div> 

Answer 2

The key is to use DIVs to surround the two areas you wish to be side-by-side. Then, use float:left to allow the DIVs to go side-by-side.

DIVs are absolutely vital to understanding positioning.

jsFiddle Demo

HTML:

<div id="imgDiv">
    <img src="http://placekitten.com/g/200/200" />
</div>
<div id="txtDiv">
    <p>text one</p>
    <p>text two</p>
</div>

css:

#imgDiv{height:200px;width:200px;float:left;}
#txtDiv{height:200px;width:200px;float:left;}

Please Read:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm

Why Float is better than position:relative and absolute while we can make layout quickly with position?

But, above all, understand that you should always surround groups of elements with DIVs. They cost absolutely no (none, nada, zero) height/width overhead, but allow you to do all kinds of great positioning stuff.

Answer 3

you can update your code like:

The HTML:

<img>
<p>text one</p>
<p>text two</p>

The CSS:

img {
width: 200px;
height: 200px;`enter code here`
vertical-align: top;
float:left;

}

Demo