如何隱藏兄弟姐妹等於身高

我正在嘗試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>

我明白了什麼？

我認爲相等的高度不工作時，兄弟姐妹有display:none，因爲當我使用簡單.itemdisplay: flex;（不針對.item.active）

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

其作品如預期，但問題是，其他項目也將顯示。見here

我的感言是動態的，所以我不能給固定的高度。

我在尋找純粹的css解決方案。謝謝

來源

2017-05-26 Ismail Farooq

這是你期待什麼？ https://jsfiddle.net/jcujh70q/3/ –

對我來說，[JSFiddle]（https://jsfiddle.net/jcujh70q/3/）似乎和OP的代碼片段一樣。幻燈片有不同的高度。 – hungerstar

@MichaelCoker不，我想所有的項目應該有相同的高度 –

在頁面上存在傳送帶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 
    }); 
} 
}

來源

2017-05-29 06:59:32

但有些時間js需要時間加載，這就是爲什麼米尋找css解決方案 –

使用這個..我測試的工作：

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

來源

2017-05-29 07:04:59

我已經提到的問題。我不想成爲固定的高度，由於動態內容 –

如果你不想固定的高度，你必須使用JS代碼...你只能通過CSS！ –

如何隱藏兄弟姐妹等於身高

回答

相關問題