如何在引導程序中獲取div的動態高度

Question

我正在嘗試創建類似於https://www.pinterest.com/主頁，其中高度根據Div &的內容決定，所有div都使用引導程序自動調整它。

我試圖這樣做，但它不按預期工作。 這裏是我試過的小提琴的鏈接http://jsfiddle.net/gmm2jcn5/

在小提琴中，我們可以看到2個div之間有白色的差距，我想消除這個差距。

.col-xs-6 { 
 
    border: 1px solid black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p class="inntertopheading">heading</p> 
 
     <div class="hr"></div> 
 
     <div class="innter-md-text"> 
 
      text 
 
      <div class="spacer10"></div> 
 
      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. 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
    </div> 
 
</div>

Answer 1

嘗試CSS3柱法，這將只需要CSS，沒有標記的修改。有

.col-xs-6 { 
 
    display: inline-block; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    -webkit-column-break-inside: avoid; 
 
    -moz-column-break-inside: avoid; 
 
    -o-column-break-inside: avoid; 
 
    -ms-column-break-inside: avoid; 
 
    column-break-inside: avoid; 
 
} 
 
    
 
/* Custom, iPhone Retina */ 
 

 
@media only screen and (min-width: 320px) { 
 
    .row { 
 
    -moz-column-count: 1; 
 
    -moz-column-gap: 0px; 
 
    -webkit-column-count: 1; 
 
    -webkit-column-gap: 0px; 
 
    column-count: 1; 
 
    column-gap: 0px; 
 
    width: 100%; 
 
    } 
 
} 
 
/* Extra Small Devices, Phones */ 
 

 
@media only screen and (min-width: 480px) { 
 
    .row { 
 
    -moz-column-count: 2; 
 
    -moz-column-gap: 10px; 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 10px; 
 
    column-count: 2; 
 
    column-gap: 10px; 
 
    width: 100%; 
 
    } 
 
} 
 
/* Small Devices, Tablets */ 
 

 
@media only screen and (min-width: 768px) { 
 
    .row { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 10px; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 10px; 
 
    column-count: 3; 
 
    column-gap: 10px; 
 
    width: 100%; 
 
    } 
 
} 
 
/* Medium Devices, Desktops */ 
 

 
@media only screen and (min-width: 992px) { 
 
    .row { 
 
    -moz-column-count: 4; 
 
    -moz-column-gap: 10px; 
 
    -webkit-column-count: 4; 
 
    -webkit-column-gap: 10px; 
 
    column-count: 4; 
 
    column-gap: 10px; 
 
    width: 100%; 
 
    } 
 
} 
 
/* Large Devices, Wide Screens */ 
 

 
@media only screen and (min-width: 1200px) { 
 
    .row { 
 
    -moz-column-count: 5; 
 
    -moz-column-gap: 10px; 
 
    -webkit-column-count: 5; 
 
    -webkit-column-gap: 10px; 
 
    column-count: 5; 
 
    column-gap: 10px; 
 
    width: 100%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 

 
        <div class="col-xs-6"> 
 
         <p class="inntertopheading">heading</p> 
 
         <div class="hr"></div> 
 
         <div class="innter-md-text"> 
 
          text 
 
         <div class="spacer10"></div> 
 

 
          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. 
 
         </div> 
 
        </div> 
 

 
        <div class="col-xs-6"> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
        </div> 
 
<div class="col-xs-6"> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
        </div> 
 
<div class="col-xs-6"> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
        </div> 
 
       </div>

Answer 2

Vaibhav的沙阿你好：以下腳本會從任何地方基於視口寬度1至5列調整。 爲了讓每個DIV塊具有相同的高度不管你可以使用一個小的jQuery像這樣的內容...

$(document).ready(function(){ 
    var heightArray = $(".block1").map(function(){ 
     return $(this).height(); 
    }).get(); 
    var maxHeight = Math.max.apply(Math, heightArray); 
    $(".block2").height(maxHeight); 
    $(".block3").height(maxHeight); 
}) 

這裏是一個工作Fiddle。

這對你在這裏想要的有幫助嗎？

如果您用鼠標調整窗口大小，只需刷新並看到div塊更改爲所有高度相同。