时间戳

首页 > 解决方案 > 试图将弹性项目与底部对齐，但它们却与第一行文本对齐

html - 试图将弹性项目与底部对齐，但它们却与第一行文本对齐

问题描述

我试图在底部对齐另一个 div 中的几个 div。它可以很容易地与包含图像的 div 一起使用，但是如果我放置的文本足够长以进行多行，那么所有 div 都与第一文本行对齐。

我做了一个小提琴看看：https ://jsfiddle.net/0cn1zatj/7/

.objet {
  position: relative;
  line-height: 0;
}

.image {
  border: 1px solid #aaa;
}

.liste {
  border: 1px solid #f00;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.texte {
  line-height: normal;
}
<div class="objet liste" id="dsk0">
  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
  <div class="objet" id="dsk1" style="width: 225.833px;height: auto;line-height:  0;vertical-align: top;" contenteditable="true">
    <div class="texte" style="
    vertical-align:  top;
">Texte qui parle de tout et de rien mais surtout de rien alors voici un peu plus de texte inutile juste pour voir la mise en forme de texte dans une div avec flex.</div>
  </div>

  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg" height="50"> </div>

  <div class="objet image" id="dsk0" height="100"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
</div>

标签： htmlcssflexbox

解决方案

您可以flex将图像或长文本结束

.liste { 
align-items: flex-end; 
}

或到中心：

align-items: center;

推荐阅读