Wie wickeln Sie dann und wickeln Sie Div bei der Größenänderung?

Question

Ich habe versucht, wenn sonst Anweisungen und es sollte ziemlich einfach sein, aber kann nicht scheinen, um den Wrap nach der Größenänderung über 650px umzukehren. Jede Hilfe würde sehr geschätzt werden !!!

GRUNDSÄTZLICH DIE BOXEN IN EINEM DIV WRAPPED ZU ERHALTEN IM VERSUCHEN, wenn das Fenster unter 650 WIDTH und dann UNVERPACKT NACH 650px

HTML OBEN RESIZING:

<div id="cat-area"> 
     <div id="cat-container"> 
      <img class="box" src="http://via.placeholder.com/200x200"> 
      <img class="box" src="http://via.placeholder.com/200x200"> 
      <img class="box" src="http://via.placeholder.com/200x200"> 
      <img class="box" src="http://via.placeholder.com/200x200"> 

     </div> 
</div> 

CSS:

#cat-area{ 
    width: 100%; 
    display: inline-block; 
    text-align: center; 
    background-color: red; 
} 

#cat-container{ 
    background-color: yellow; 
    width: 92.5%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 

} 


.box { 
    display: inline-block; 
    width: 20%; 
    height: 20%; 
    max-height: 300px; 
    max-width: 300px; 
    min-height: 100px; 
    min-width: 100px; 
    padding: 1%; 
    background-color: #d7d7d7; 
} 

@media only screen and (max-width: 650px) { 

    #cat-area{ 
    width: 100%; 
    display: block; 
    text-align: center; 
    background-color: red; 
} 

#cat-container{ 
    background-color: blue; 
    width: 92.5%; 
    display: block; 



} 

.box { 
    position: relative; 
    display: block; 
    margin: 4px 0px; 
} 

.boxwrap{ 
    background-color: #d7d7d7; 
    width: 100%; 
} 

JQUERY:

$(window).resize(function() { 
    if($(window).width() < 650) 
     $('.box').wrap("<div class='boxwrap'><div/>") 

    }); 

    $(window).resize(function() { 
    if($(window).width() > 650) 
     $('.box').unwrap("<div class='boxwrap'><div/>") 

    }); 

Answer 1

Ich habe mir selbst ein ähnliches Problem gestellt. Hier ist ein einfaches Beispiel dafür, wie Sie dies tun können:

1. Beachten Sie die Seitenbreite zunächst
2. Auf Resize, nach einem kurzen Timeout (nach dem Ändern der Größe aufgehört hat), beachten Sie die neue Breite
3. Vergleichen Sie die beiden Werte, um zu bestimmen, ob wir Maßnahmen ergreifen sollte oder nicht
4. unsere Breite für das nächste Mal auf die neue Breite, zum Vergleich zurückstellen wir

Führen sie den folgenden Code-Schnipsel, erweitern sie auf Vollbild, und stellen sie die bro Größe ändern wser Größe, um zu sehen, wie es funktioniert.

$(function() { 
 
    var resizeTimer; 
 
    var initialSize = $(window).width(); 
 
    $(window).resize(function() { 
 
    clearTimeout(resizeTimer); 
 
    resizeTimer = setTimeout(function() { 
 
     var delayedSize = $(window).width(); 
 
     // if we resize the page but we don't cross the 650 threshold, do nothing 
 
     if ((initialSize > 650 && delayedSize > 650) || (initialSize < 650 && delayedSize < 650)) { 
 
     return 
 
     } 
 
     // else if we resize the page and cross the 650 threshold, do something 
 
     else { 
 
     if (delayedSize > 650) { 
 
      $('#cat-container').unwrap('#cat-area'); 
 
     } else if (delayedSize <= 650) { 
 
      $('#cat-container').wrap('<div id="cat-area"></div>'); 
 
     } 
 
     } 
 

 
     initialSize = delayedSize; 
 
    }, 250); 
 
    }); 
 
});

#cat-area { 
 
    background-color: gold; 
 
    padding: 10px; 
 
} 
 
#cat-container { 
 
    background-color: slategray; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cat-area"> 
 
    <div id="cat-container"> 
 
    <img class="box" src="http://via.placeholder.com/200x200"> 
 
    <img class="box" src="http://via.placeholder.com/200x200"> 
 
    <img class="box" src="http://via.placeholder.com/200x200"> 
 
    <img class="box" src="http://via.placeholder.com/200x200"> 
 
    </div> 
 
</div>