每行的子列相等

Question

我有一个产品图库，父母和子div的高度需要相同。

我需要每行计算一次。但是我得到了最高的孩子，它正在适用于所有的div。我想要的是获得最高的div并按行应用它。

$(document).ready(function() {
 var item_title_height = 0;
 var item_details_height = 0;

 $('.item-title').each(function(i, obj) {
    if($(this).height() > item_title_height) {
    item_title_height = $(this).height();
  }
 });

 $('.item-details').each(function(i, obj) {
    if($(this).height() > item_details_height) {
    item_details_height = $(this).height();
  }
 });

$(".item-title").height(item_title_height);
$(".item-details").height(item_details_height);

});

这是我的小提琴

fiddle

希望你能帮助我

Answer 1

不确定如何在jQuery中执行此操作。但你可以很容易地找到最大的div与香草。使用window.getComputedStyle获取可能没有显式css或html样式声明的元素的样式信息。

Test

Answer 2

所以我推断的是：你想要查看每一行，找到该行中的最高div，并将该行中的所有div设置为该高度。意思是并非所有行都具有相同的高度，但行中的所有列都具有相同的高度。

要做到这一点，你需要有一种方法来按行分组。我改变了你的html，这样每3个子div被包裹在＆＃34; row＆＃34;格。

查看更新的小提琴：http://jsfiddle.net/Qr48S/54/（编辑 - 修复链接）

$(document).ready(function() {


  $('.row').each(function(){
    var item_title_height = 0;
    var item_details_height = 0;
    $(this).find('.item-title').each(function(i, obj) {
        if($(this).height() > item_title_height) {
          item_title_height = $(this).height();
        }
    });

    $(this).find('.item-details').each(function(i, obj) {
        if($(this).height() > item_details_height) {
          item_details_height = $(this).height();
        }
    });

    $(this).find('.item-title').height(item_title_height);
    $(this).find('.item-details').height(item_details_height);
  });
});

您需要遍历每一行，然后遍历该行中的每个div，并将更改应用于该行中的所有div。希望有所帮助！

Answer 3

也许你可以继续使用CSS和javascript这个

// JS maybe not necessary

.row {
  display: flex;
  flex-wrap: wrap;
}

.item-container {
  width:350px;
  flex:1 1 auto;
  margin: 5px;
  border: solid;
  display: flex;
  flex-direction: column;
  background: gray;
  padding:0!important;/* overides bootstrap */
}
.item-details {
  flex: 1;
  background: white;
}

.item-button {
  margin: 5px;
  text-align: right;
}
/* image width a bit responsive ? */

img {
  width:100%;
  max-width:500px;
  margin:auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
      </div>
      <div class="item-button">
        <buttn 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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
        <p>details 5</p>
        <p>details 6</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 </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">
        <buttn 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 </div>
      <div class="item-details">
        <p>details 1</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 </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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
        <p>details 5</p>
      </div>
      <div class="item-button">
        <buttn 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 </div>
      <div class="item-details">
        <p>details 1</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 </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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
      </div>
      <div class="item-button">
        <buttn 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 </div>
      <div class="item-details">
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</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 </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 </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">
        <buttn 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 </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>

</div>

<强> demo