动态图像在文本旁边垂直对齐答案

【问题标题】：Dynamic image vertically aligned beside text动态图像在文本旁边垂直对齐
【发布时间】：2013-09-12 03:51:33
【问题描述】：

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

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

但这仅适用于我在文本上设置宽度以便图像在其旁边滑动的情况。

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

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

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

jsfiddle with a table：http://jsfiddle.net/9Ufgj/（我不喜欢使用表格进行布局...）

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

【问题讨论】：

您能否添加一个带有 HTML 表格版本的演示（使用像 jsfiddle.net 这样的网站），准确显示您想要做什么？
是的，对不起，我之前没有这样做。
实际上，表格看起来是最优雅的解决方案。偶尔将表格用于垂直对齐或等高列是完全合理的。对于一般布局，CSS 表格在语义上会稍微好一些（如果您不需要支持 IE7 及更早版本），但 HTML 表格也可以。展望未来，如果您不需要支持 IE9 及更早版本，您可以尝试使用 CSS3 flexbox，但这可能有点矫枉过正。
嗯，是的，你是对的。 Flexbox 是不可能的，因为我需要支持 IE8+，但我可能可以使用 css 表。我将把这个问题留一会儿。也许有人有更好的主意。

标签： css layout vertical-alignment

【解决方案1】：

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

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

.clear {clear: both;}

【讨论】：

是的，我知道，但图像没有垂直对齐。

【解决方案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>

【讨论】：