Wie div unter der Liste der floating divs einfügen

Question

Angenommen, Sie haben 5-20 innere Kästchen in einer äußeren Box, die eine Breite von 300-500 Pixel hat.

<outer> 
<inner>Number 1</inner> 
<inner>Number 2</inner> 
<inner>Number 3</inner> 
<inner>Number 4</inner> 
<inner>Number 5</inner> 
<inner>Number 6</inner> 
... 
</outer> 

Je nach Außenbreite, könnten sie so werden angezeigt Ende:

Number 1 Number 2 
Number 3 Number 4 
Number 5 Number 6 

Oder diese:

Number 1 Number 2 Number 3 
Number 4 Number 5 Number 6 

Wenn Sie nun eine innere Box (zB tippen. # 2), möchten Sie eine neue Box unter dem angeklopften Feld enthüllen:

Number 1 Number 2 
+----------------+ 
|    | 
| Hello Number 2 | 
|    | 
+----------------+ 
Number 3 Number 4 
Number 5 Number 6 

Oder wenn die Breite größer ist, würde es so aussehen:

Number 1 Number 2 Number 3 
+--------------------------+ 
|       | 
|  Hello Number 2  | 
|       | 
+--------------------------+ 
Number 4 Number 5 Number 6 

Meine Frage ist, um leicht in der Lage sein, die neue Box an der richtigen Stelle in Markup einzufügen, was ist der beste Weg, um Legen Sie die inneren Kästen aus?

a) Schweben Sie einfach die inneren Kästen. Gut: Browser behandelt Positionierung. Bad: Wie bestimmen Sie, wo die neue Box eingefügt werden soll, wenn Ihr Code die Positionen der inneren Boxen nicht kennt?

b) Positionieren Sie die Boxen in Spalten und Reihen entsprechend der verfügbaren Breite. Gut: Einfach, die neue Box an der richtigen Stelle einzusetzen. Problem: Erzeugt Herausforderungen mit Reaktionsfähigkeit.

Example: See how album details are revealed in iTunes when clicking an album thumbnail

Answer 1

Ich hoffe, ich habe Ihre Frage richtig, müssen Sie die CSS ändern, wenn nötig, zum Beispiel eine Klasse hinzufügen, die schweben hat: keine und klar:. Beide, wenn eine Bedingung (wie Klick auftritt

habe ich ein Beispiel an der Geige. https://jsfiddle.net/ejeqs8m7/2/ klicken Sie einfach auf eines der divs

Es eine Klasse schaltet .clicked die wie folgt aussieht:

.clicked { 
    float:none; 
    clear:both; 
    width:auto; 
} 

Answer 2

Sie können überprüfen, ob die Elemente in derselben horizontalen Linie liegen oder nicht, und das Viewer-Element dynamisch mit JavaScript hinzufügen.

var idles = document.querySelectorAll('.idle'); 
 
Array.prototype.forEach.call(idles, function(idle) { 
 
    idle.addEventListener('click', showInfo); 
 
}); 
 

 
function showInfo(e) { 
 
    var selectedTabClass = 'active'; 
 
    var viewerClass = 'viewer'; 
 
    if (showInfo.prevClickElement && showInfo.prevClickElement !== this) { 
 
    showInfo.prevClickElement.classList.remove(selectedTabClass); 
 
    } 
 
    if (this.classList.contains(selectedTabClass)) { 
 
    // remove viewer element 
 
    showInfo.viewer.parentElement.removeChild(showInfo.viewer); 
 
    this.classList.remove(selectedTabClass); 
 
    return; 
 
    } 
 
    if (!showInfo.viewer) { 
 
    // Create a viewer element only if it wasn't created before 
 
    showInfo.viewer = document.createElement('div'); 
 
    showInfo.viewer.classList.add(viewerClass); 
 
    } 
 

 
    if (!showInfo.section) { 
 
    // Get the parent container 
 
    showInfo.section = document.querySelector('section'); 
 
    } 
 
    var after = this; 
 
    // Getting the next element which isn't in the exact horizontal line with the clicked element 
 
    while (after && after.offsetTop === this.offsetTop) { 
 
    after = after.nextElementSibling; 
 
    } 
 

 
    // Add the content through the below line 
 
    showInfo.viewer.innerHTML = this.innerHTML + " Viewer"; 
 
    if (after) { 
 
    showInfo.section.insertBefore(showInfo.viewer, after); 
 
    } else { 
 
    // if after element isn't present then safely assuming that the clicked element was in the last horizontal line and appending the viewer element 
 
    showInfo.section.appendChild(showInfo.viewer); 
 
    } 
 
    this.classList.add(selectedTabClass); 
 
    showInfo.prevClickElement = this; 
 
}

section { 
 
    width: 200px; 
 
} 
 
.idle { 
 
    background-color: green; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
.clicked { 
 
    background-color: yellow; 
 
    float: none; 
 
    clear: both; 
 
    width: auto; 
 
} 
 
.viewer { 
 
    clear: both; 
 
}

<section> 
 
    <div class="idle">Div #1</div> 
 
    <div class="idle">Div #2</div> 
 
    <div class="idle">Div #3</div> 
 
    <div class="idle">Div #4</div> 
 
    <div class="idle">Div #5</div> 
 
    <div class="idle">Div #6</div> 
 
    <div class="idle">Div #7</div> 
 
    <div class="idle">Div #8</div> 
 
</section>