Question

我有几张图片 mockleft.png-1228x500px mockright.png-1825x335px

我的代码如下。

<head>

    <link href="css/bootstrap.min.css" rel="stylesheet">


</head>

<body id="home">
    <div class="intro">

        <div class="row">
            <div class="col-xs-5" style="background-color:blue">

                <img src="img/mockleft.png" alt="logo" style="width:100%;">

            </div>
            <div class="col-xs-1"></div>
            <div class="col-xs-6" style="background-color:red;">

                <img src="img/mockright.png" alt="logo" style="width:100%;">

            </div>
        </div>
    </div>

</body>

输出如下。

我希望有两件事。

a）蓝色背景的左div高度应与红色背景的右div高度相同，反之亦然。

b）一旦带有红色背景的右div的大小与左div的大小相同，我就希望将mockright.png图像在右div的底部垂直对齐。

我尝试将div和图像垂直对齐的CSS都没有成功。

衷心感谢所有帮助

谢谢

Answer 1

您可以使用flexbox做到这一点。如果您按照注释中@Pete的建议使用Bootstrap 4，则可以实现相同的效果，因为它使用的是flexbox。

JSFiddle Demo

.row {
  display: flex;
}

.col-xs-1 {
  width: 10%;
}

.col-xs-5 {
  display: flex;
  flex-direction: column;
  width: 40%;
  background: blue;
  justify-content: flex-end;
}
.col-xs-6 {
  width: 50%;
  background: red;
}

<div class="row">
  <div class="col-xs-5">
    <img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
  </div>

  <div class="col-xs-1"></div>

  <div class="col-xs-6">
    <img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
  </div>
</div>

Answer 2

a）假设您需要使用Bootstrap 3，您可以使用提供的选项之一使列的高度相同： How can I make Bootstrap columns all the same height?

b）对于那部分，请使用自动边距：

<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">

希望它会有所帮助：）

垂直对齐div和图像

2 个答案: