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

Question

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

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

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

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

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

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

带表的 jsfiddle: http://jsfiddle.net/9Ufgj/ (我不喜欢使用表格进行布局......)

带有 inline-block 的 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;}