在相同的顶部位置开始 div s

Question

我在另一个 div 中有 3 个 div，我希望其中两个从相同的顶部位置开始，另一个位于另一个的中心。这是代码

<div class="col-lg-8 col-md-8 col-xs-12  ">
    <div class="col-1 div-container-product-images   showbordergreen ">
        <div class="div-product-images-list">
            @foreach(var item in Model.Images)
            {
              <div class="mt-2 d-block"><img src="~/@item" width="70" height="70" /></div>
            }
        </div>
    </div>
    <div class="col-6 text-center  d-inline-flex showborderred">
        <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
    </div>
    <div class="col-4 d-inline-flex showborderblue">
        Title
    </div>
</div>

这是css

 .div-container-product-images {
display: inline-flex;
vertical-align: middle;
 }

.div-product-images-list{
margin: auto;    
  }
 .showborderred {
 border: 2px solid red;
 }

.showborderblue {
 border: 2px solid blue;
 }
.showbordergreen {
border: 2px solid green;
 }

但它变成了这样：

我希望蓝框和红框在相同的顶部位置开始，绿框在红框的中间高度

我该怎么做？

Answer 1

在您的父容器上启用弹性。然后在上面加上align-items-startclass，在绿框里加上align-self-center。

Answer 2

希望下面的代码对你有帮助。

我将列换成一行并添加了 class .align-items-start 以将列对齐到顶部。并在要居中对齐的最后一列上添加 .align-self-center class。

.div-container-product-images {
display: inline-flex;
vertical-align: middle;
 }

.div-product-images-list{
margin: auto;    
  }
 .showborderred {
 border: 2px solid red;
 }

.showborderblue {
 border: 2px solid blue;
 }
.showbordergreen {
border: 2px solid green;
 }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-4    ">
    <div class="div-container-product-images w-100   showbordergreen ">
        <div class="div-product-images-list ">
            <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" />
        </div>
    </div>
    </div>
    <div class="col-4 text-center  d-inline-flex showborderred">
        <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" />
    </div>
    <div class="col-4   align-self-center">
    <div class="showborderblue">
        Title
        </div>
    </div>
</div>

在相同的顶部位置开始 div s

starting div s on the same top position

html

css

bootstrap-4