javascript - 根据内容最多的一张调整所有卡片的高度

Question

我正在使用 Owl Carousel 来显示不同的卡片元素。在这里，我面临着每张卡片的高度问题。正如我们所看到的，卡片的高度取决于里面的内容。我想根据内容最多的卡片显示具有相同高度的所有卡片。 (即这里的第一张卡:'Tile 1' ~ 带红色边框)

我使用的是 Owl 轮播版本2.0.0

我已经尝试过“display:flex”选项，但不确定是否正确。这是 owl-stage 的 CSS。

.owl-carousel .owl-stage {
    position: relative;
    margin:  0 auto;
    -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0, 0)
}

这是 owl-item 的 CSS。

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

这是 HTML:

<div class="owl-carousel owl-theme">
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
            <div id="link_with_images">Tile 1</div>
            <p id="sub_title">Tile 1 SH Tile 1 SH Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH1Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH SH</p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src=" https://www.photolakedistrict.co.uk/wp-content/uploads/2017/11/sony-A9-sample-photographs.jpg">
            <div id="link_with_images">Tile 3</div>
            <p id="sub_title">TIle 3 SH</p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
            <div id="link_with_images">tile 3</div>
            <p id="sub_title"></p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
            <div id="link_with_images">FutureMakers</div>
            <p id="sub_title">Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH</p>
        </div>
    </a>
</div>

TIA

Answer 1

我通过使用flex解决了这个问题。 我将 html 更改为

<div class="owl-carousel owl-theme">
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
                    <div class="caption">
                        <div id="link_with_images">Tile 1</div>
                        <p class="flex-text" id="sub_title">Tile 1 SH T</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src=" https://www.photolakedistrict.co.uk/wp-content/uploads/2017/11/sony-A9-sample-photographs.jpg">
                    <div class="caption">
                        <div id="link_with_images">Tile 3</div>
                        <p class="flex-text" id="sub_title">TIle 3 SH</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
                    <div class="caption">
                        <div id="link_with_images">tile 3</div>
                        <p class="flex-text" id="sub_title">asdsfa fasasfas fasdasf</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
                    <div class="caption">
                        <div id="link_with_images">FutureMakers</div>
                        <p class="flex-text" id="sub_title">Tile 1 SHTile 1 SH</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

并添加了以下 CSS。

.owl-carousel .owl-stage {
        display: flex;
    }
    .owl-carousel   .owl-item {
        display: flex;
        flex: 1 0 auto;
    }
    .owl-carousel .caption {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        padding: 0px 10px;
    }
    .owl-carousel .flex-text {
        flex-grow: 1
    }
    .owl-carousel .thumbnail {
        display: flex;
        flex-direction: column;
    }
    .owl-carousel .container {
        display: grid;
    }