0

我想完成以下效果。

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

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

4

3 回答 3

1

使用位置：相对；关于.header和position:absolute; *底部：0；* 在div.position 上；

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

于 2013-10-30T20:11:39.693 回答
1

向左浮动位置属性。

应该解决问题。

于 2013-10-30T20:12:31.983 回答
1

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

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

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

于 2013-10-30T20:29:47.933 回答