將多行文本對齊到圖像的右側

我想讓它具有圖像，並且在圖像的右側有文本應該只佔用兩行。所以，這樣的事情。該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

將多行文本對齊到圖像的右側

回答

相關問題