重叠在主容器

时间：2016-09-08 08:16:47

标签： html css3 countdown

我已经制作了一个容器，显示订阅者下一个订阅日期的倒计时，但是只要没有days，months或{{1}，布局就会出现问题左侧，将使用我们的years语句从容器中删除该特定框（这不是小提琴中的，必须手动删除时间框以进行测试）。

在底部看到编辑

当删除一个主容器时，主容器的宽度会变小，并且内部的图形元素（例如<xsl-if>和.reflection遵循相同的行为并自行调整）很重要，我有一些jQuery为了解决这个问题，我注意到当“Days”消失或删除时它仍然无法运行，即使它在“年”和“月”消失时按预期工作。

  

jsfiddle 

.reflectionLng

我觉得它与嵌套在<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> “Days”内的.reflection元素有关，但我无法确定问题所在。

当“{DAYS”的div不再有效或显示时，请帮助我将小提琴中显示的容器设为下面的屏幕截图。

enter image description here

编辑：我更新了jsfiddle，修复了它，以便容器现在相应地调整其宽度，当从容器中删除“Days”timeBox时，但div {{1}仍然嵌套在“天”timeBox内，我无法让它在外面正常工作。

1 个答案:

答案 0 :(得分：1)

好的，所以我会这样做。我会更改您用来创建＆＃34;背景＆＃34;的<div>元素。到::before和::after伪元素。而不是试图用jQuery改变CSS我只是相应地改变timeContainer的类并添加适当的CSS声明。

这是一个可以看到所有三个值的代码段：

＆＃13;
＆＃13; 
 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');
 }
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
 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');
 }
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这里有一个JSFiddle来玩：https://jsfiddle.net/thepio/pfbuLhux/

修改

糟糕，我没有密切关注你的jQuery。现在它已修复，无论哪个盒子被移除，都应该适用于任何情况。另外，我只需将display:none;设置为::before和::after伪元素，只有一个框，因此根本不会显示它们。

＆＃13;
＆＃13; 
 if ($(".timeContainer > div").length <= 1) {
   $('.timeContainer').addClass('one-part');
 } else if ($(".timeContainer > div").length <= 2) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题