Question

我想这样做是为了有一个图像，在图像的右边，有文本应该只占用两行。所以，像这样...... 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;
}

这个问题是两个人的问题。标签在同一行。我试过放一个

<br />

在他们之间，但发送第二个＆＃39; p＆＃39;在图像下方。我有什么方法可以让这两个人做到这一点。各自在自己的行上标记？注意：我不想将文本放在div中，然后给div一个宽度，比如200px，因为我希望文本正好是两行而不管屏幕大小。（文本由最终用户生成，因此如果文本很长且div只有200px，则两个标记可能只占用两行以上。）

这是一个小提琴：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

关键是使用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围绕元素组。它们绝对没有（无，无，零）高度/宽度开销，但允许你做各种伟大的定位。

Answer 3

您可以更新代码，如：

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

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

3 个答案: