文本与另一个元素垂直对齐

Question

在下面的代码片段中，我有一个标题和一个图像，两个div都在容器div中。 图像向右浮动，固定高度为80px。我想要的是标题在左边，图像在同一行的右边，文本在底部与图像对齐。首先，我尝试在 .text-element 上使用内联块，在 .text-element-content 上尝试内联，但垂直对齐似乎在那里不起作用。经过几次尝试和一些阅读，我想出了以下带有显示的解决方案：表格/表格单元格，以及为 .text-element 设置固定高度，然后垂直对齐：底部工作。但后来我看到了另一个(小(问题。现在，标题文本中"p"的下点与图像的底线在同一行。但是我希望其他字母(如"e"，"d"，"t"(的底部与图像底线在同一行上。我尝试了垂直对齐：基线，但似乎完全是为了别的东西......有没有办法实现我想要的？有没有更好的方法来垂直对齐：没有表格/表格单元格的底部？出于某种原因，我可能不会更改 DOM，只更改其上的 CSS，并且我也可能不使用 flex-box。

具有不同行高的解决方案不能完全解决我的问题，因为它仅适用于这种特殊情况，并且一旦更改字体，我就需要另一个行高。

.container-element {
position: relative;   
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}

<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 1

您可以尝试调整文本的line-height属性：

.container-element {
position: relative;
border-bottom: 1px solid red;
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
line-height: .7;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}

<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 2

即使你说你不能使用flex-box(因为IE(，我也会用一个flex-box的解决方案来回答。IE11 与弹性框配合使用良好。请参阅 caniuse.com 上的已知问题。

结合订单，解决方案可能如下所示：

.container-element {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.image {
order: 2;
}
.text-element {
order: 1;
}

<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 3

这应该受到bootstrap启发。

.container-element {
position: relative;   
}
.media-left,.media-right {
display: table-cell;
vertical-align: top
}
.media-right {
padding-left: 10px
}
.media-left {
padding-right: 10px
}
.media-bottom {
vertical-align: bottom
}

<div class="container-element">
<div class="media-left media-bottom">
I'm a title with help
</div>
<div class="media-right">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
</div>