0
我提出了一个视图 - staff1 - 在drupal 7中有四个响应视图行。每行包含下面的图像和文本;我有一个覆盖图像和文本位置相同的高度绝对在图像的中心。我通过jQuery来做到这一点。jQuery并不总是按顺序运行
简体版：
var imgHeight = $(".img").height();
var rowHeight = $(".wrapper").height() - $(".img").height();
$(".red-back").css("height", imgHeight);
$(".wrapper").css("height", imgHeight).css("margin-bottom", rowHeight);* {
box-sizing: border-box;
}
img {
max-width: 100%
}
.wrapper {
width: 25%;
float: left;
position: relative;
padding: 0 15px;
}
.img {
display: block;
line-height: 0;
position: relative;
}
.red-back {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #e74c3c;
visibility: hidden;
opacity: 0;
}
.wrapper:hover .red-back {
visibility: visible;
opacity: 0.75;
}
.text {
visibility: hidden;
position: absolute;
font-size: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, 100%);
z-index: 5;
opacity: 0;
color: #333;
}
.wrapper:hover .text {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%);
}
.transition {
transition: all 0.4s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>有时候工作，其他时候不？我已经有几次高度是15px，但用Angular jQuery修复。
完整版本：
var imgHeight = $(".view-staff1 .views-field-colorbox img").height(); var rowHeight = $(".view-staff1 .views-row").height() - $(".view-staff1 .views-field-colorbox img").height();
$(".view-staff1 .views-row").css("height", imgHeight).css("margin-bottom", rowHeight); $(".view-staff1 .views-field-colorbox .red-back").css("height", imgHeight);
逻辑：
两个变量：
- imageHeight =图像高度
- rowHeigh t =父元素高度（包含图像和文本的包装），减去imageHeight
使包装等于imgHeight和margin-bottom到rowHeight。使覆盖高度等于imgHeight。
的问题是，有时jQuery的不会的东西的顺序运行，我得到imageHeight等于0像素。
如果你只有那么为什么你喜欢做这使用jQuery的CSS这样做呢？ –
@MinalChauhan在这种情况下，我可以通过drupal视图中的重写函数使其工作。但是，在这种情况下，我不得不使用jQuery。 –