我怎樣才能讓一個兩個div敏感，當第一個不可

Question

我怎樣才能改變一個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

作爲一種理念，我提議兩個標籤，包裝成一個街區，它們對齊底部。

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