Wie kann ich ein zwei divs anspricht, wenn die ersten nicht verfügbar

Question

ist Wie kann ich die Position eines Div ändern, wenn der zweite nicht verfügbar ist, zum Beispiel:

Also, wenn die Div2 ist nicht verfügbar Ich brauche, dass das Div1 den Platz des Div2 übernimmt, wie es im Bild der Rechten zeigt.

Hier ist der Code

.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

Als Idee ich vorschlagen würde zwei Etiketten in einen Block umwickeln und diese Unterseite auszurichten.

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

Bei Bedarf können Sie diese DOM Änderungen mit JavaScript tun können. Hier ist nur ein Beweis des Konzeptes:

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