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