如果隐藏了同级，如何使列的高度相等

Question

我正在尝试等高的列，并在推荐页面的引导轮播上实现它。我希望所有轮播商品的高度都相同，但它没有按预期工作。

这是我的例子：

@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;
}

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

我的推荐是动态的，所以我不能给出固定的高度。我正在寻找纯粹的CSS解决方案。

Answer 1

您需要在页面上存在轮播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 
    });
}
}

Answer 2

使用它..我测试工作：

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