Question

我正在尝试equal height并在bootstrap carousel上执行此操作以获取推荐信。我希望所有旋转木马项目的高度必须相同，但它不能按预期工作。

这是示例

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的理解是什么？

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

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

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

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

我正在寻找纯粹的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%;
}

如果隐藏兄弟姐妹，如何平等身高

2 个答案: