Question

在下面的代码片段中，我有一个标题和一个图像，两个div都在容器div中。图像向右浮动，固定高度为80px。我想要的是左边的标题，同一行右边的图像，以及底部与图像对齐的文本。首先，我尝试了.text-element上的inline-block和.text-element-content的内联，但vertical-align似乎并没有在那里工作。经过几次尝试和一些阅读后，我想出了以下解决方案：display / table-table，另外设置了.text-element的固定高度，然后是vertical-align：bottom工作。但后来我看到了另一个（小）问题。现在是＆＃34; p＆＃34;的低点。标题文本与图像的底行在同一行。但我想要其他字母的底部，如＆＃34; e＆＃34;，＆＃34; d＆＃34;，＆＃34; t＆＃34;与图像底线在同一条线上。我尝试了vertical-align：baseline但它似乎完全是为了别的东西......有没有办法实现我想要的东西？有没有更好的方法来获得vertical-align：bottom没有table / table-cell？出于某些原因，我可能不会更改DOM，只更改它上面的CSS，我也可能不会使用flex-box。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

即使你说过，你不能使用flex-box（因为IE），我会用flex-box解决方案回答。 IE11适用于flexbox。请参阅caniuse.com上的已知问题。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

文本与另一个元素

3 个答案: