我试图创建三个块设置的高度和宽度,在顶部/底部对齐,也放置在他们夫妇的元素。我的问题是,每当我把额外的DIV到一个元素是每三个元素内的DIV的数量是不一样的,它将显示与“失踪”元素1行低的元素。请参见下面的代码示例:
<div class="container">
<div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
<div>thing1</div>
<div>XXX</div>
</div>
<div class="d-inline-block border border-success" style="width:16%;height:15vh;">
<div>thing2</div>
</div>
<div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
<div>thing3</div>
<div>XXX</div>
</div>
</div>
我用的是Bootstrap 5.0。上面的代码在渲染时将显示“thing 2”框没有与其他框对齐,被推低。
对这种行为有什么想法吗?
我尝试过将元素 Package 在额外的div中以设置最大高度等,我也尝试过使用position-relative/absolute,但我就是不明白一个盒子对另一个盒子的影响。
2条答案
按热度按时间acruukt91#
如果您继续使用
display: inline-block
,请添加vertical-align: top
下面是示例snippte:
7hiiyaii2#
由于“d-inline-block”而出现问题。解决方案是使用网格系统,下面的代码有帮助: