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。 –