gpt4 book ai didi

javascript - 在同一级别/高度显示列的内容

转载 作者:太空宇宙 更新时间:2023-11-03 19:36:24 24 4
gpt4 key购买 nike

我将 div 中的列设置为 display:flex。所有列都居中。列内容都是vertical-align: middle;

当所有内容的高度都相同时效果很好(见代码片段)。但是当一列比其他列高时,我希望较短的列与最高的列处于同一水平/高度,如下图所示,而最高的列在中间保持垂直: enter image description here

这可以使用 css 或 javascript 吗?

.cont { height:400px;  width: 100% }
.button-bottom {display: flex;
align-items: center;
justify-content: center; height:50%;background: yellow;}

.column {width: 20%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;}
<div class="cont">  
<div class="button-bottom">
<div class="column">
<h5>Ambience Blah BLha mana na hhsjs</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
</div>
</div>

最佳答案

我这样做是为了积分。这是您的解决方法。

.cont { height:400px;  width: 100% }
.button-bottom {display: flex;
justify-content: center; height:50%;background: yellow;}
.column {width: 20%;
display: table-cell;
float: none;}
<div class="cont">  
<div class="button-bottom">
<div class="column">
<h5>Ambience Blah BLha mana na hhsjs</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
</div>
</div>

关于javascript - 在同一级别/高度显示列的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37979869/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com