Question

我正试图在另一个内部对齐几个div。使用包含图像的div可以很容易地使用flex工作，但是如果我将文本放在足够长的几行上，那么所有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>

Answer 1

你可以flex图片或长篇文章的结尾

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

或到中心：

align-items: center;

Answer 2

使用align-items: baseline，您告诉所有项目使用基线对齐，它们沿着内容的第一行（在这种情况下为文本或图片）排列。< / p>

如果您希望项目在容器底部对齐，请使用align-items: flex-end。

.liste {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border: 1px solid #f00;
}

.image {
  border: 1px solid #aaa;
}

.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>

更多信息：

尝试将弹性项目对齐到底部，而是将它们与第一行文本对齐

2 个答案: