使用jquery调整div并向上移动

时间：2016-12-27 12:26:16

标签： jquery html css vertical-alignment

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

我做了一个简单的jquery高度变化，所以每个div都获得了最高的div的高度。

然而，当我这样做时，高度被添加到底部，所以即使div是相同的高度，它们也不会显示在一行中。

以下是一个示例：https://jsfiddle.net/p30rduon/

＆＃13;
＆＃13; 
$(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);
});
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

任何人都可以给我一个暗示我缺少的东西吗？

5 个答案:

答案 0 :(得分：2)

使用 vertical-align：top; 在一行中显示div。

＆＃13;
＆＃13; 
$(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);
});
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您的卡为inline-block，默认为基线 vertical-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>

答案 2 :(得分：0)

尝试在你的css中设置它：

display: table-cell;

而不是：

display: inline-block;

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

答案 3 :(得分：0)

根据你的html在body标签中使用 display：inline-flex; 

LOAD DATA LOCAL INFILE 'myfile.csv' 
INTO TABLE my_table FIELDS TERMINATED BY ',' 
 ENCLOSED BY '\"' 
 LINES TERMINATED BY '\r\n' IGNORE 1 LINES 
(schedule_code, p_year, adscode)

FIDDLE

答案 4 :(得分：0)

使用此脚本。我希望这段代码能够与您的代码一起使用。 谢谢

$(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>

相关问题
最新问题