gpt4 book ai didi

html - 如何处理高度不同的 flex 元素?

转载 作者:行者123 更新时间:2023-11-28 15:11:21 25 4
gpt4 key购买 nike

<分区>

我创建了 this带有以下标记的 Plunker:

.items {
display: flex;
align-items: center;
padding: 10px;
-webkit-flex-flow: row wrap;
}

.items span {
border: 1px solid #888;
margin: 5px;
padding: 10px;
width: 35%;
}
<div class="row-fluid">
<div class="span8">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="span4" style="border: 1px solid red">
<div class="items">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
<span>Fifth which has more text than others</span>
<span>Sixth</span>
<span>Seventh</span>
<span>Eighth</span>
<span>Ninth</span>
<span>Tenth</span>
<span>Eleventh</span>
<span>Twelfth</span>
</div>
</div>
</div>

如您所见,当一个元素比“正常”元素占据更多高度时,它看起来比旁边的元素更大,因此有点奇怪。有没有办法优雅地处理这个问题,例如。使每行中的元素高度相同?

此外,是否有比响应式调整大小更好的方法来处理指定容器的列宽?我想要两列,并且有填充,width: 35% 看起来工作正常,但它看起来很老套。

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