Question

我需要让childs div与列相同。我只有一行，其余的将是引导程序中的一列。

这是我创造的小提琴

我已经把它做到了相同但我的问题是脚本获得了最高的div并将其应用到其他列，这使得其他列只要没有那么长的内容就会有一个很大的空白区域。我需要的是每行获取它虽然我没有声明多行。

按钮也需要在列的底部

看起来像这样

<div class="container">
  <div class="row">
    <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>

      <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>
   </div> 
</div>

Answer 1

我的建议是使用匹配高度插件

我已将它粘贴到你的jsfiddle

的这个分支中

http://jsfiddle.net/n2e4wg76/

然后，您可以看到它会使它更简单。当然，不是粘贴整个js文件，而是包含来自的js文件 https://github.com/liabru/jquery-match-height

然后只需使用

$(document).ready(function() {

    $('.item-container').matchHeight();

});

使用jquery使子div在行上相等

1 个答案: