文本和图像并排对齐

问题描述：

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

如何达到预期效果？如果问题太简单，我很抱歉。

答

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

您可能还需要给div.position一个高度。

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

答

浮动位置属性在左边。

应该解决这个问题。

这项工作有没有机会？ – MrMarlow

答

Verical-align属性仅适用于内联和表格单元格。

要完成此操作，请尝试删除包装div，或将它们定义为内联显示。然而，float不能用于内联元素，所以为了使图像跟随文本，你只需要在你的html中反转它们。

你也可以制作一个假表格单元，欺骗浏览器垂直对齐。为此，您需要将父元素显示为表格。

文本和图像并排对齐

相关推荐