我在另一個 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;
}
但它變成了這樣：
我希望藍色盒子和紅色盒子從相同的頂部位置開始，綠色盒子在紅色盒子的中間高度
我怎樣才能做到這一點？
uj5u.com熱心網友回復：
在父容器上啟用 flex。然后將align-items-start類添加到它和align-self-center綠色框中。
uj5u.com熱心網友回復：
我希望下面的代碼可以幫助你。
我將列包裝在一行中，并添加了類 .align-items-start 以將列對齊到頂部。并在要對齊中心的最后一列上添加 .align-self-center 類。
.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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453134.html
下一篇：SQL資料透視和按月分組