Question

点击时，我有一组图像切换类。底部有一条文字线。

此文字根据字符数消失。我找不到原因。

在片段上，点击图片时：

蓝色框的字符数超过22个，文字正常。
绿色框的字符少于22个，文字消失。

$('.photo').click(function() {
  $(this).toggleClass('expandImage')
});

p.text {
  font-family: cursive;
  font-size: 1.35rem;
  line-height: 0;
  color: #c2c;
  display: block
}

p a {
  font-size: 0.65rem;
  line-height: 2.6rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img.photo {
  height: 49%;
  width: 49%;
  cursor: zoom-in;
  /*cursor:url(file:///Macintosh HD/Desk/PENDIENTES/FOTOS/GENERAL/zoom.cur), -moz-zoom-in;*/
  padding-bottom: 0.25rem;
}

img.photo.expandImage {
  position: absolute;
  justify-content: center;
  width: 97.8%;
  height: 97.8%;
  cursor: zoom-out;
}

.container {
  box-shadow: 0.075rem 0 0 0 #C9C9C9, 0 0.075rem 0 0 #C9C9C9, 0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset, 0 0.075rem 0 0 #C9C9C9 inset;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background-color: #ffffff;
  max-width: 25rem;
  max-height: 25rem;
  min-width: 20rem;
  min-height: 20rem;
  padding: 0.32rem;
  justify-content: space-between;
  margin: 1rem 3% 4rem;
}

.info {
  position: absolute;
  bottom: -3.25rem;
  width: 1.5rem;
  height: 3rem;
  right: 0;
  color: #FF0004;
  text-indent: -9999px;
  background-image: url(https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435);
  background-repeat: no-repeat;
  display: block;
  background-size: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <p class="text">Text<span style="color:#2E27A8"> – With 22 charact</span></p>
  <a class="info" href="#">info</a>
</div>

<div class="container">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <p class="text">Text<span style="color:#2E27A8"> – With 21 charac</span></p>
  <a class="info" href="#">info</a>
</div>

Answer 1

您可以将width: 100%;和flex-shrink: 0;添加到p.text，以防止此元素向上移动到绝对定位的大图像后面的空白区域并隐藏在图像后面（即被覆盖它）：

（将position: absolute应用于其中一个图像也会在右下角创建空格，因为如果您不强制它具有全宽，文本就会移动到该空格。）

$('.photo').click(function() {
  $(this).toggleClass('expandImage')
});

p.text {
  font-family: cursive;
  font-size: 1.35rem;
  color: #c2c;
  line-height: 0;
  display: block;
  width: 100%;
  flex-shrink: 0;
}

p a {
  font-size: 0.65rem;
  line-height: 2.6rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img.photo {
  height: 49%;
  width: 49%;
  cursor: zoom-in;
  /*cursor:url(file:///Macintosh HD/Desk/PENDIENTES/FOTOS/GENERAL/zoom.cur), -moz-zoom-in;*/
  padding-bottom: 0.25rem;
}

img.photo.expandImage {
  position: absolute;
  justify-content: center;
  width: 97.8%;
  height: 97.8%;
  cursor: zoom-out;
}

.container {
  box-shadow: 0.075rem 0 0 0 #C9C9C9, 0 0.075rem 0 0 #C9C9C9, 0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset, 0 0.075rem 0 0 #C9C9C9 inset;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background-color: #ffffff;
  max-width: 25rem;
  max-height: 25rem;
  min-width: 20rem;
  min-height: 20rem;
  padding: 0.32rem;
  justify-content: space-between;
  margin: 1rem 3% 4rem;
}

.info {
  position: absolute;
  bottom: -3.25rem;
  width: 1.5rem;
  height: 3rem;
  right: 0;
  color: #FF0004;
  text-indent: -9999px;
  background-image: url(https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435);
  background-repeat: no-repeat;
  display: block;
  background-size: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
  <p class="text">Text<span style="color:#2E27A8"> – With 22 charact</span></p>
  <a class="info" href="#">info</a>
</div>

<div class="container">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
  <p class="text">Text<span style="color:#2E27A8"> – With 21 charac</span></p>
  <a class="info" href="#">info</a>
</div>

文字根据字符数消失

1 个答案: