兄弟が隠れている場合の高さの換算方法

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{ 
 
\t 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>

のですか？私は（.item.activeをターゲットにせずに）簡単な.itemにdisplay: flex;を使用した場合ので、兄弟が期待通りに

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

その作品をdisplay:noneを持っているとき

は、私は同じ高さが動作していないと思いますが、問題が表示されます他のアイテムです。 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%; 
}