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

Question

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

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

这是代码

.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>
  <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>

Answer 1

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

.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);