如果兄弟姐妹被隐藏，如何相等高度

Question

我正在尝试equal height 并在bootstrap carousel 上实现此功能以供推荐。我希望所有轮播项目的高度必须相同，但不能按预期工作。

这里是例子

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css');
body {
    background: #ccc;
}
div#carousel-example-generic {
    margin: auto;
    max-width: 600px;
}
.carousel-inner {
    display: flex;
}
.carousel-inner > .item.active{
    display: flex;
}
div#carousel-example-generic p{
	border: 1px solid #efefef;
    padding: 40px;
}
    
ol.carousel-indicators {
    position: static;
    text-align: center;
    margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <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="item">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
        </div>
        <div class="item">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has typesetting industry. Lorem Ipsum has been the </p>
        </div>
    </div>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
</div>

我了解什么？

我认为当兄弟姐妹有display:none 时，等高不起作用，因为当我在简单的.item 上使用display: flex; 时（没有定位.item.active）

.carousel-inner > .item{
    display: flex;
}

它按预期工作，但问题是其他项目也会显示。见here

我的推荐是动态的，所以我不能给出固定的高度。

我正在寻找纯 CSS 解决方案。谢谢

Answer 1

使用这个..我测试工作：

.carousel-inner > .item{
    height:300px;
}
.carousel-inner > .item > p{
   display:block;
   height:100%;
}

Answer 2

当轮播 HTML 出现在页面上之后，或者一旦 DOM 准备好，你会想要执行 jQuery。

function carouselNormalization() {
var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

if (items.length) {
    function normalizeHeights() {
        items.each(function() { //add heights to array
            heights.push($(this).height()); 
        });
        tallest = Math.max.apply(null, heights); //cache largest value
        items.each(function() {
            $(this).css('min-height',tallest + 'px');
        });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function () {
        tallest = 0, heights.length = 0; //reset vars
        items.each(function() {
            $(this).css('min-height','0'); //reset min-height
        }); 
        normalizeHeights(); //run it again 
    });
}
}