文字和圖像並排對齊

Question

我想實現以下效果。

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

如何達到理想的效果？ 如果這個問題太簡單，我深表歉意。

Answer 1

使用位置：相對； 在.header和position上：絕對； * 底部：0; *在排名上；

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

Answer 2

浮動位置屬性在左側。

應該解決問題。

Answer 3

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

為此，請嘗試刪除換行的div，或將它們定義為inline display。 但是，float不能與內聯元素一起使用，因此要使圖像跟隨文本，您只需要在html中將它們反轉即可。

您還可以制作一個假的表格單元，欺騙瀏覽器使其垂直對齊。 為此，您需要將父元素顯示為表格。