用jquery调整div大小并向上移动

Question

我想制作内容可能不同的动态块，以便每个div的高度可以不同。

我已经做了一个简单的jquery高度变化，所以每个div都获得最高的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

使用垂直对齐：首位;在一行中显示div。

$(document).ready(function(){ 
 
var maxHeight = Math.max.apply(null, $("div.pb").map(function() 
 
{ 
 
\t 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

尝试设置这个在你的CSS：代替

display: table-cell; 

：

display: inline-block; 

这里是工作提琴：https://jsfiddle.net/pd7m2otk/

Answer 3

你卡是inline-block，并默认为基线垂直对齐 - 所以加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 4

使用显示：直列挠曲;于一体的标签，按您的HTML

body{ 
    display: inline-flex; 
} 

FIDDLE

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>