在镁铁质弹出窗口中垂直对齐图像

Question

我试图对齐我的图片在网页的画廊垂直，所以所有的底部匹配在一行？我用的是万能弹出。我该怎么做？目前，它们垂直地以如下方式居中：

​

​

Answer 1

如果你在寻找HTML和CSS的帮助，你应该发布你已经尝试过的或者其他的东西。无论如何，我将假设您需要一个基于HTML/CSS的答案，并建议使用如下的flex框布局：

​

.parent {
  display: flex;
  align-content: flex-end;
  align-items: baseline;
}

.red {
  height: 100px;
  width: 50px;
  background: red;
}

.blue {
  height: 200px;
  width:200px;
  background: blue;
}

.green {
  height: 50px;
  width: 80px;
  background: green;
}

<div class="parent">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </div>

​

在IE9或更早版本中不支持Flexbox，所以要小心。

或者，您可以将display: inline-block和vertical-align: bottom添加到图像中(示例中的div)。

​

.parent > div {
  display: inline-block;
  vertical-align: bottom;
}

.red {
  height: 100px;
  width: 50px;
  background: red;
}

.blue {
  height: 200px;
  width:200px;
  background: blue;
}

.green {
  height: 50px;
  width: 80px;
  background: green;
}

<div class="parent">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </div>

​