垂直对齐 div 和图像

debugcn 发表于 Dev

兔子

我有几张图片 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 与左侧的大小相同，我希望 mockright.png 图像在右侧 div 的底部垂直对齐。

我尝试了垂直对齐 css 到 div 和图像，但没有成功。

真诚感谢所有帮助

谢谢

马克·霍思

你可以用 flexbox 做到这一点。如果您像@Pete 在评论中建议的那样使用 Bootstrap 4，则可以实现相同的效果，因为它使用 flexbox。

JSFiddle 演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。