以大胆的弹出方式垂直对齐图像

Question

我试图将我的图像垂直对齐在网页的图库中，以便所有底部在一条线上匹配？我正在使用巨大的弹出窗口。我怎样才能做到这一点？目前它们是如此垂直居中：

Answer 1

如果您正在寻找HTML和CSS的帮助，您应该发布到目前为止您尝试过的内容或其他内容。在任何情况下，我都会假设你想要一个基于HTML / CSS的答案，并建议使用弹性框布局，如下所示：

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