html - Bootstrap : Using grid system getting three different sized items to line up

Question

我试图让 3 个不同的组件在垂直方向上同样适合，一个左侧菜单、一个主图像和 2 个副图像。

这是我到目前为止的片段:

http://www.bootply.com/xcIWtG0Z7w

两件事:

左侧组件的底部、中间图像和侧面图像的底部图像应该对齐(以及各自的顶部)，并且 2，我可能无法提前知道图像的大小。

有没有使用网格系统来做到这一点？我一直在玩弄它，唯一有用的是当我更改图像大小时会中断的任意边距。我真的根本不是前端人员，所以我很确定我只是没有正确地描绘它。

提前致谢。

编辑:这是预期的外观(目前都可以使用):

Answer 1

这是一个 demo如何实现这一目标

这里的关键元素是vertical-align里面的内容

<div class="col-xs-6 col-height col-top">
    <div class="inside">
      <div class="content">
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&amp;bg=654321&amp;txtclr=ffffff&amp;txt=LEFT%20MENU&amp;w=200&amp;h=550">
      </div>
    </div>
  </div>

这是它的 css

.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: bottom;
}

现在对于包含多个图像的列，您可以在内部创建多个 div 或任何可以在 2 个图像之间添加填充的内容。

我希望你对它有一个大致的了解