Question

我试图在图像左侧放置一些文字。内联块不够，因为如果字符串足够长，它只是向下推动图像。

目标是拥有一个具有固定宽度的容器，其中包含右侧的图像和填充左侧的文本，如果足够长，则会包裹，同时垂直对齐底部。

我有一个使用浮点数的初始示例：

.container {
    width: 200px;
}
.container img {
    width: 60px;
    height: 60px;
    float: right;
}
.container h1 {
    font-size: 15px;
}

<div class="container">
    <img src="//placehold.it/60x60"/>
    <h1>Text Text Text Text Text</h1>
</div>

问题在于文本垂直对齐顶部。我希望它与底部对齐。我已经尝试了一切，但我无法让它发挥作用。有什么想法吗？

Answer 1

<强> jsFiddle demo

反转子元素的顺序并尝试使用此CSS（模拟 Table 元素的使用）

.container{
    display:table;
    width: 200px;
}
.container > *{  /* target immediate children */
    display:table-cell;
    vertical-align:bottom;
}
.container img {
    width: 60px;
    height: 60px;
}
.container h1 {
    font-size: 15px;
}

<div class="container">
    <h1>Text Text Text Text Text</h1>
    <img src="//placehold.it/60x60" />
</div>

_{P.S：搜索引擎优化（搜索引擎优化） - 在页面中拥有更多的<h1>并不是最好的主意。明智地使用h1;）}

对齐图像左侧的底部包装文本

1 个答案: