Question

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

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

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

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

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

编辑：我可以通过表格实现这一点。有更好的方法吗？

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

jsfiddle with inline-block（取消注释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>

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

2 个答案: