与jQuery一起调整大小，然后向上移动

Question

我想制作动态块哪个内容可能会有所不同，因此每个DIV的高度可以不同。

我做了一个简单的jquery高度变化，因此每个DIV都获得了最高的DIV的高度。

但是，当我这样做时

这是一个示例：https：//jsfiddle.net/p30rduon/

$(document).ready(function() {
  var maxHeight = Math.max.apply(null, $("div.pb").map(function() {
    return $(this).height();
  }).get());
  $('div.pb').css('height', maxHeight);
  $('div.pb').css('margin-top', 0);
});

div.pb {
  margin: 0 auto;
  width: 200px;
  height: auto;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 20px;
  background-color: rgba(54, 25, 25, .1);
  box-shadow: 10px 10px 5px #888888;
}
.img-circle {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, .5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
p {
  margin: 0;
  text-align: center;
}
p.firstline {
  font-size: 100%;
  font-weight: bold;
  word-wrap: break-word;
}
p.second {
  font-size: 100%;
  font-weight: bold;
}
p.third {
  font-size: 80%;
}
p.fourth {
  font-size: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>

任何人都可以提示我想念什么？

Answer 1

使用垂直align：top; 以一行显示div。

$(document).ready(function(){
var maxHeight = Math.max.apply(null, $("div.pb").map(function ()
{
	return $(this).height();
}).get());
$('div.pb').css('height', maxHeight);
$('div.pb').css('margin-top', 0);
}); 

div.pb {
margin:0 auto;
width: 150px;
height: auto;
display: inline-block;
margin-right: 15px;
margin-bottom: 20px;
background-color: rgba(54, 25, 25, .1);
box-shadow: 10px 10px 5px #888888;
vertical-align: top;
}
.img-circle {
border-radius: 50%;
width: 120px;
height: 120px;
background-color: rgba(255, 255, 255, .5);
display: block;
margin-left: auto;
margin-right: auto;
}
p { 
margin: 0; 
text-align: center;
}
p.firstline {
 font-size: 100%;
 font-weight: bold;
 word-wrap:break-word;
}
p.second {
 font-size: 100%;
 font-weight: bold;
}
p.third {
 font-size: 80%;
}
p.fourth {
 font-size: 70%;
}

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>
<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>
<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>

Answer 2

您的 cards 是 inline-block，并且默认为基线垂直align-因此，添加 vertical-align: top来解决此问题。

请参见下面的演示：

$(document).ready(function() {
  var maxHeight = Math.max.apply(null, $("div.pb").map(function() {
    return $(this).height();
  }).get());
  $('div.pb').css('height', maxHeight);
  $('div.pb').css('margin-top', 0);
});

div.pb {
  margin: 0 auto;
  width: 200px;
  height: auto;
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  margin-bottom: 20px;
  background-color: rgba(54, 25, 25, .1);
  box-shadow: 10px 10px 5px #888888;
}
.img-circle {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, .5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
p {
  margin: 0;
  text-align: center;
}
p.firstline {
  font-size: 100%;
  font-weight: bold;
  word-wrap: break-word;
}
p.second {
  font-size: 100%;
  font-weight: bold;
}
p.third {
  font-size: 80%;
}
p.fourth {
  font-size: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>

Answer 3

尝试在CSS中设置此设置：

display: table-cell;

而不是：

display: inline-block;

这是一个工作小提琴：https：//jsfiddle.net/pd7m2otk/

Answer 4

使用 display：inline-flex; 根据您的html

在身体标签中

body{
  display: inline-flex;
}

小提琴

Answer 5

使用此脚本。我希望此代码能够使用您的代码。谢谢你

$(document).ready(function() {
    //set the starting bigestHeight variable  
    var biggestHeight = 0;
    //check each of them  
    $('.pb').each(function() {
        //if the height of the current element is  
        //bigger then the current biggestHeight value  
        if ($(this).height() > biggestHeight) {
            //update the biggestHeight with the  
            //height of the current elements  
            biggestHeight = $(this).height();
        }
    });
    //when checking for biggestHeight is done set that  
    //height to all the elements  
    $('.pb').height(biggestHeight);
});

div.pb {
    margin: 0 auto;
    width: 150px;
    height: auto;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 20px;
    background-color: rgba(54, 25, 25, .1);
    box-shadow: 10px 10px 5px #888888;
    vertical-align: top;
}
.img-circle {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, .5);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
p {
    margin: 0;
    text-align: center;
}
p.firstline {
    font-size: 100%;
    font-weight: bold;
    word-wrap: break-word;
}
p.second {
    font-size: 100%;
    font-weight: bold;
}
p.third {
    font-size: 80%;
}
p.fourth {
    font-size: 70%;
}

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div class="pb">
    <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
    <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
    <p class="second">donejob</p>
    <p class="third">2016-12-12</p>
    <p class="fourth">Job Type</p>
</div>
<div class="pb">
    <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
    <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
    <p class="second">donejob</p>
    <p class="third">2016-12-12</p>
    <p class="fourth">Job Type</p>
</div>
<div class="pb">
    <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
    <p class="firstline">Lorem ipsum Lorem ipsum </p>
    <p class="second">donejob</p>
    <p class="third">2016-12-12</p>
    <p class="fourth">Job Type</p>
</div>