文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使两个单独的无序列表项的高度相同？

问如何使两个单独的无序列表项的高度相同？
EN

Stack Overflow用户

提问于 2020-06-26 00:10:55

回答 2查看 87关注 0票数 0

对于上下文，它看起来是这样的。在第二个无序列表中，我希望项目具有与第一个无序列表中的项目相同的高度，即使它们没有第2节或第3节。这可以使用flexbox或任何其他类型的css吗？我尽量避免使用JS计算高度。在下面的代码片段中，我使用的是纯css，但在实际代码中，我使用的更少。

编辑:我不能硬编码高度，因为这些部分是动态的，并且是由从API检索的数据生成的。另外，我不能让它们垂直滚动。

代码：

<html>

<head>
    <style>
        .module {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .module .container_wrapper {
            border: solid 1px;
        }

        .module .panes-2 {
            flex: 0 0 49%;
        }

        .module .card {
            display: inline-block;
            border: solid 1px;
        }
    </style>
</head>

<body>
    <section class="module">

        <div class="container_wrapper panes-2">
            <ul>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                    <p>section 2</p>
                    <p>section 3</p>
                </li>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                    <p>section 2</p>
                    <p>section 3</p>
                </li>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                    <p>section 2</p>
                    <p>section 3</p>
                </li>
            </ul>
        </div>
        <div class="container_wrapper panes-2">
            <ul>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                </li>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                </li>
                <li class="card">
                    <img src="https://i.picsum.photos/id/132/200/200.jpg?hmac=meVrCoOURNB7iKK3Mv-yuRrvxvXgv4h2vIRLM4sKwK4"
                        alt="">
                    <p>section 1</p>
                </li>
            </ul>
        </div>
    </section>

</body>

</html>

css

flexbox

less

回答 2

Stack Overflow用户

发布于 2020-06-26 01:25:10

我做了一点调查。不确定这是否是您要找的，但是使用bootstrap可能会有所帮助：

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

票数 0

Stack Overflow用户

发布于 2020-06-26 01:29:40

.card {
height: 500px;
overflow-y: scroll;
}

你也可以使用overflow-y: auto；

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62579695

复制

相似问题

问如何使两个单独的无序列表项的高度相同？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个单独的无序列表项的高度相同？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个单独的无序列表项的高度相同？
EN