gpt4 book ai didi

html - 将列高与动态兄弟匹配

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

<分区>

我有两列。左列应指示右列的高度,但其自身的高度会有所不同。如果左列有更多元素,右列应该增长以匹配它。如果右栏有更多元素,它应该停在左栏的高度,然后滚动。

我试过使用 flexbox,但似乎无法让它按我喜欢的方式工作。我知道我可以用 javascript 做到这一点,但我确信必须有一个我只是找不到的纯 css 解决方案。

Example

这是我目前拥有的:

<div class="row" style="display: flex;">
<div class="col-xs-12" style="flex: 0 0 auto;">
<div class="panel panel-default">
<div class="panel-heading">Panel 1 header</div>
<div class="panel-body" style="background-color: red;">
<ul>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12" style="flex: 0 0 auto;">
<div class="panel panel-default">
<div class="panel-heading">Panel 2 header</div>
<div class="panel-body" style="background-color: blue;">
<ul>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
<li>0 to many items</li>
<li>scroll</li>
<li>scroll</li>
</ul>
</div>
</div>
</div>
</div>

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