配置图片对齐问题

Question

我有一个显示用户个人资料数据的页面。

我使用以下代码对齐字段

<h4><div class='holder'><span class='plabel'>Name</span> <span class='values'>: $name</span></div></h4><br />

相应的css是，

.holder {
width:700px;
overflow:hidden;
}

.plabel {
float:left;
display:inline-block;
width:150px;
}

.values {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
width:550px;
float:right;
}

现在我想将个人资料图片添加到个人资料数据的右侧，如下所示，

姓名：

年龄：pic这里＆gt;

等...

我尝试在名称之前使用以下代码

<span class='ppic'><img src='$url' alt='Profile Pic' /></span>

用css，

.ppic {
width:200px;
float:right;
}

它与右边对齐，但是名称等等就像我插入了换行符一样。

感谢。

Answer 1

如果你只需要让图像保持在右侧，你可以试试这个而不是浮动：

.ppic {
width:200px;
position:absolute;
right:0;
}

Answer 2

尝试将此添加到该元素的CSS（.ppic）：

display: inline-block;

或者将其设为<div>。