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

我想让它具有图像，并且在图像的右侧有文本应该只占用两行。所以，这样的事情。该HTML：将多行文本对齐到图像的右侧

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

的CSS：

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

p { 
    display: inline-block; 
}

这个问题是两个“P”标签是在同一条线上。我尝试了在它们之间放置一个

<br />

但发送图像下面的第二个'p'。我有没有办法让自己的两个“p”标签分别出现？注意：我不想将文本放在div中，然后给div一个200px的宽度，因为无论屏幕大小如何，我都希望文本恰好是两行。（文本由最终用户生成，所以如果文本很长，div只有200px，那么这两个'p'标签可能会占用不止两行）。

这里是一个小提琴：http://jsfiddle.net/dgh8kf5x/1/

来源

2014-09-23 user2719875

把段落放在一个DIV中，使它成为'inline-block'。 – Barmar 2014-09-23 01:06:47

[示例]（http://jsfiddle.net/ejnqz2w2/）演示此^ – 2014-09-23 01:08:11

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>

来源

2014-09-23 01:10:57 Barmar

的关键是使用的DIV包围你希望是并排侧的两个领域。然后，使用float:left以允许DIV并行。

DIV对理解定位绝对至关重要。

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;}

请阅读：

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?

但是，最重要的是明白，你应该总是与周围DIV的一组元素。他们的成本绝对不是（无，零，零）高度/宽度开销，但允许你做各种伟大的定位的东西。

来源

2014-09-23 01:11:07 gibberish

您可以更新您的代码，如：

的HTML：

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

的CSS：

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

}

Demo

来源

2014-09-23 05:30:01 Aru

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

回答

相关问题