css - 动态图像在文本旁边垂直对齐

Question

如何垂直对齐我不知道应该填充容器其余部分的文本旁边大小的图像？

.image,.text { 
    display: inline-block; 
    vertical-align:middle; 
} 

但这仅在我在文本上设置宽度以便图像在其旁边滑动时才有效。

.text {
    width: 100% - .image.width();
}

我可以用 javascript 做到这一点，但有没有办法用纯 css 实现这一点？

编辑：我可以用一张桌子来实现这一点。有更好的办法吗？

带有表格的 jsfiddle：http: //jsfiddle.net/9Ufgj/（我不喜欢使用表格进行布局......）

带有内联块的jsfiddle（取消注释css）http://jsfiddle.net/9Ufgj/1/（尝试调整图像和/或容器的大小。文本没有填满容器的全部剩余宽度）

Answer 1

您需要将图像向左浮动并将文本设置为溢出隐藏。查看我的 JSFiddle：http: //jsfiddle.net/9Ufgj/2/

img {
    width: 150px; 
    height:150px;
    float: left;
}
p {
    overflow: hidden;
}

.clear {clear: both;}

Answer 2

即使我讨厌使用表格进行布局，我也使用了表格：http: //jsfiddle.net/9Ufgj

<table>
    <tr>
        <td>
            <img src="">
        </td>
        <td>
            <p>sometext that can be multiline. sometext that can be multiline.</p>
        </td>
    </tr>
</table>