如何在bootstrap中获得div的动态高度

Question

我正在尝试创建类似于https://www.pinterest.com/主页的内容，其中根据Div＆amp;的内容确定高度。所有div都使用bootstrap自动调整它。

我试图这样做，但它没有按预期工作。 这是我尝试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

vaibhav shah 你好。 要使每个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块更改为具有相同高度的所有窗口。

Answer 2

尝试使用CSS3列方法，这只需要CSS，不需要修改标记。以下脚本将根据视口宽度调整1到5列的任何位置：

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