跟随其主容器的重叠 div

Question

我制作了一个容器，为我们的订阅者显示下一个订阅日期的倒计时，但是布局存在一些问题，只要没有 days、months 或 years 离开，那个特定的框将用我们的 <xsl-if> 语句从容器中删除（这在 fiddle 中不存在，必须手动删除时间框以进行测试）。

查看底部的编辑内容

移除后，主容器的宽度变小，重要的是内部的图形元素，如 .reflection 和 .reflectionLng 遵循相同的行为并自行调整，我有一些 jQuery 可以解决这个问题，但是我注意到当 "Days" 消失或删除时它仍然无法正常工作，即使它在 "Years" 和 [= 时按预期工作45=]不见了。

jsfiddle

<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
            <xsl:text><int:text>7</int:text></xsl:text>
                        </span>
      <br/>
      <span class="timeChar">
                                    <xsl:text><int:text>YEARS</int:text></xsl:text>
                                </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
            <xsl:text><int:text>11</int:text></xsl:text>
                        </span>
      <br/>
      <span class="timeChar">
                                    <xsl:text><int:text>MONTHS</int:text></xsl:text>
                                </span>
    </div>
        <div class="timeBox">
      <span class="timeNum">
            <xsl:text><int:text>18</int:text></xsl:text>
                        </span>
      <br />
      <span class="timeChar">
                                    <xsl:text><int:text>DAYS</int:text></xsl:text>
                                </span>
      <div class="reflection"></div>
    </div>

    <div class="reflectionLng"></div>
  </div>

我感觉它与嵌套在 div "Days" 中的 .reflection 元素有关，但我无法确定问题所在。

当 "DAYS" 的 timeBox 不再活动或显示时，请帮助我将 fiddle 中显示的容器用作下面的屏幕截图。

编辑：我更新了 jsfiddle，修复了它，以便容器现在在 "Days" timeBox 时相应地调整其宽度从容器中移除，但是 div .reflection 仍然嵌套在 "Days" timeBox 中，我无法让它在外面正常工作。

Answer 1

好的，这就是我的做法。我会将您用来创建 "background" 的 <div> 元素更改为 ::before 和 ::after 伪元素。而不是试图用 jQuery 改变 CSS 我只是相应地改变 timeContainer 的 class 并添加适当的 CSS 声明。

这是一个包含所有三个值的片段：

 if ($('.timeContainer #timeBoxYears').length <= 0 && $('.timeContainer #timeBoxMonths').length <= 0) {
   $('.timeContainer').addClass('one-part');
 } else if ($('.timeContainer #timeBoxYears').length <= 0 || $('.timeContainer #timeBoxMonths').length <= 0 || $('.timeContainer #timeBoxDays').length <= 0) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }

.wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  transform: rotate(-45deg);
}
.timeContainer.one-part::after {
  transform: rotate(-63deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
        <xsl:text><int:text>7</int:text></xsl:text>
   </span>
      <br/>
      <span class="timeChar">
     <xsl:text><int:text>YEARS</int:text></xsl:text>
   </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
   </span>
      <br/>
      <span class="timeChar">
     <xsl:text><int:text>MONTHS</int:text></xsl:text>
   </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
   </span>
      <br />
      <span class="timeChar">
     <xsl:text><int:text>DAYS</int:text></xsl:text>
   </span>
    </div>
  </div>

这是一个只有两个值可见的片段：

 if ($('.timeContainer #timeBoxYears').length <= 0 && $('.timeContainer #timeBoxMonths').length <= 0) {
   $('.timeContainer').addClass('one-part');
 } else if ($('.timeContainer #timeBoxYears').length <= 0 || $('.timeContainer #timeBoxMonths').length <= 0 || $('.timeContainer #timeBoxDays').length <= 0) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }

.wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  transform: rotate(-45deg);
}
.timeContainer.one-part::after {
  transform: rotate(-63deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
   </span>
      <br/>
      <span class="timeChar">
     <xsl:text><int:text>MONTHS</int:text></xsl:text>
   </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
   </span>
      <br />
      <span class="timeChar">
     <xsl:text><int:text>DAYS</int:text></xsl:text>
   </span>
    </div>
  </div>

这里有一个 JSFiddle 可供使用：https://jsfiddle.net/thepio/pfbuLhux/

编辑：

糟糕，我没有仔细看你的 jQuery。现在它已修复，无论移除哪个框，它都应该适用于任何情况。另外我只是在只有一个盒子的时候把display:none;设置为::before和::after伪元素，所以它们根本不会显示。

 if ($(".timeContainer > div").length <= 1) {
   $('.timeContainer').addClass('one-part');
 } else if ($(".timeContainer > div").length <= 2) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }

.wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  display: none;
}
.timeContainer.one-part::after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
        <xsl:text><int:text>7</int:text></xsl:text>
   </span>
      <br/>
      <span class="timeChar">
     <xsl:text><int:text>YEARS</int:text></xsl:text>
   </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
   </span>
      <br/>
      <span class="timeChar">
     <xsl:text><int:text>MONTHS</int:text></xsl:text>
   </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
   </span>
      <br />
      <span class="timeChar">
     <xsl:text><int:text>DAYS</int:text></xsl:text>
   </span>
    </div>
  </div>

一个新的 JSFiddle：https://jsfiddle.net/thepio/qdbyaaxb/

跟随其主容器的重叠 div

Overlapping divs that follow their main container

html

css

countdown