将 div 调整为 jquery 并向上移动

Question

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

我做了一个简单的 jquery 高度更改，因此每个 div 都获得了最高的 div 的高度。

然而，当我这样做时，高度会添加到底部，所以即使 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: 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

尝试在您的 css 中进行设置：

display: table-cell;

而不是：

display: inline-block;

这是一个有效的 fiddle ：https://jsfiddle.net/pd7m2otk/

Answer 2

使用 vertical-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 3

您的卡片是 inline-block 并且默认为 baseline 垂直对齐 - 所以将 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;

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>

将 div 调整为 jquery 并向上移动

resize div with jquery and move up

html

css

jquery

vertical-alignment