如何在浮动div列表下方插入div

Question

Say you have 5-20 inner boxes inside an outer box, which has a width of 300-500 pixels.

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

Depending on the outer width, they could end up being displayed like this:

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

Or this:

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

Now, when you tap an inner box (eg. #2), you want to reveal a new box underneath the tapped box:

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

Or if the width is larger, it would look like this:

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

My question is, in order to be able to easily insert the new box in the correct place in markup, what is the best way to lay out the inner boxes?

a) Simply float the inner boxes. Good: Browser handles positioning. Bad: How do you determine where to insert the new box when your code doesn't know the positions of the inner boxes?

b) Have your code position the boxes in columns and rows according to the available width. Good: Easy to insert the new box the right place. Problem: Creates challenges with responsiveness.

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

Answer 1

I hope i got your question right, you need to change the css when needed , for example add a class that has float:none and clear:both when a condition (like click occurs.

I did an example on fiddle: https://jsfiddle.net/ejeqs8m7/2/ Just click on any of the divs.

It toggles a class .clicked that looks like this:

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

Answer 2

You can check whether the elements are in same horizontal line or not and add the viewer element dynamically using JavaScript.

 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>