文本和圖像並排對齊

我想完成以下效果。文本和圖像並排對齊

  ----- 
     -img- 
     ----- 
--text-- ----- 
-------- -----

現在，我有以下代碼：

<div class="header"> 
     <div class="pictureFrame"> 
      <img class="picture" src="photo.jpg"/> 
     </div> 
     <div class="position"> 
      text 
     </div> 
</div> 

<div class="separator"></div>

通過以下樣式：

.pictureFrame 
{ 
width: 150px; 
float: right; 
} 

.position 
{ 
vertical-align: bottom; 
} 

.separator 
{ 
clear: both; 
}

但垂直對齊似乎並沒有被工作，即，我得到以下，

--text-- ----- 
-------- ----- 
     ----- 
     -img- 
     -----

如何達到預期效果？如果問題太簡單，我很抱歉。

來源

2013-10-30 ziutek

使用位置：相對; on .header and position：absolute; * bottom：0; * on div.position;

您可能還需要給div.position一個高度。

來源

2013-10-30 20:11:39 Phorden

不幸的是，這不起作用 - 文本仍然排在最前面 – ziutek

浮動位置屬性在左邊。

應該解決這個問題。

來源

2013-10-30 20:12:31 MrMarlow

這項工作有沒有機會？ – MrMarlow

Verical-align屬性僅適用於內聯和表格單元格。

要完成此操作，請嘗試刪除包裝div，或將它們定義爲內聯顯示。然而，float不能用於內聯元素，所以爲了使圖像跟隨文本，你只需要在你的html中反轉它們。

你也可以製作一個假表格單元，欺騙瀏覽器垂直對齊。爲此，您需要將父元素顯示爲表格。

來源

2013-10-30 20:29:47

文本和圖像並排對齊

回答

相關問題