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：relative; ，在位置：绝对; * bottom：0; *在 div.position;

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

Answer 2

浮动位置属性在左侧。

应该解决问题。

Answer 3

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

要完成此操作，请尝试删除包装div，或将它们定义为内联显示。但是，float不能与内联元素一起使用，因此要使图像跟随文本，您只需要在html中反转它们。

您还可以创建一个假的表格单元，欺骗浏览器垂直对齐。为此，您需要将父元素显示为表格。

文本和图像并排对齐

3 个答案: