当第一个div不可用时，如何使两个div响应

Question

当第二个不可用时，如何更改Div的位置，例如：

因此，当Div2不可用时，我需要Div1代替div2，如右图所示。

这是代码

＆＃13;

＆＃13;

.fu-article-img {
              img {
                position: relative;
                z-index: -1;

                width: 100%;
                max-width: 100%;
              }
              .label {
                font-family: $font-open-sans;
                font-size: 12px;
                font-weight: bold;

                position: absolute;
                right: 15px;

                display: table;

                padding: 5px 10px;

                border-radius: 0;
                
                &.fu-category {
                  margin-top: -55px;
                }
                
                &.fu-category-tag {
                  margin-top: -33px;

                  color: #324358;
                  background-color: white;
                  
                }
              }
  }

＆＃13;

<div class="fu-article-img">
<a href="#" itemprop="url">
  <img     src="http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/koala_ecalypt.jpg" title="A Different C.L.A.S.S. of Sustainability" alt="A Different C.L.A.S.S. of Sustainability" class="img-responsive" />
</a>
  <a href="#">
    <div class="label label-primary fu-category">
      div1blablala
    </div>
  </a>
  <a href="#1">
    <div class="label label-primary fu-category-tag">
      div2blablala
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

作为一个想法，我建议将两个标签包装成一个块并将它们对齐到底部。

.fu-summary {
  border: 1px solid black;
  position: absolute;
  right: 30px;
  bottom: 30px;  
  background: white;
  padding: 5px;
}


.fu-article-img {
  border: 1px solid black;
  float: left;
  position: relative;
}

.fu-article-img {
              img {
                position: relative;
                z-index: -1;

                width: 100%;
                max-width: 100%;
              }
              .label {
                font-family: $font-open-sans;
                font-size: 12px;
                font-weight: bold;

                position: absolute;
                right: 15px;

                display: table;

                padding: 5px 10px;

                border-radius: 0;
                
                &.fu-category {
                  margin-top: -55px;
                }
                
                &.fu-category-tag {
                  margin-top: -33px;

                  color: #324358;
                  background-color: white;
                  
                }
              }
  }

<div class="fu-article-img">
<a href="#" itemprop="url">
  <img     src="http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/koala_ecalypt.jpg" title="A Different C.L.A.S.S. of Sustainability" alt="A Different C.L.A.S.S. of Sustainability" class="img-responsive" />
</a>
  <div class="fu-summary">
    <a href="#">
      <div class="label label-primary fu-category">
        div1blablala
      </div>
    </a>
    <a href="#1">
      <div class="label label-primary fu-category-tag">
        div2blablala
      </div>
    </a>
  </div>
</div>

如果您希望可以使用JavaScript进行DOM更改。这只是一个概念验证：

var fuArticleImg = document.querySelector(".fu-article-img");
// Find anchors without first one.
var anchors = document.querySelectorAll(".fu-article-img a:not([itemprop])");
// Create new container
var newContainer = document.createElement("div");
newContainer.addAttribute("class", "fu-summary");
// Add anchors to container.
for (var i = 0; i < anchors.length; i++) {
  newContainer.append(anchors[i]);
}
// Remove anchors.
for (var i = 0; i < anchors.length; i++) {
  fuArticleImg.removeChild(anchors[i]);
}
// Add container with anchors.
fuArticleImg.append(newContainer);