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

Question

假設您在一個外部框內有5-20個內部框，外部框的寬度為300-500像素。

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

根據外部寬度，它們最終可能會像這樣顯示：

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

或這個：

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

現在，當您點擊一個內部框（例如，＃2）時，您想要在被點擊的框下面顯示一個新框：

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

或者，如果寬度較大，則看起來像這樣：

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

我的問題是，為了能夠輕松地在標記中的正確位置插入新框，布置內部框的最佳方法是什么？

a）只需將內盒浮起即可。 良好：瀏覽器可以處理定位。 不好：當您的代碼不知道內部框的位置時，如何確定在哪里插入新框？

b）讓您的代碼根據可用寬度將框定位在列和行中。 良好：容易在正確的位置插入新盒子。 問題：以響應能力創造挑戰。

示例：查看單擊專輯縮略圖時如何在iTunes中顯示專輯詳細信息

Answer 1

我希望我的問題正確無誤，您需要在需要時更改css，例如，添加一個具有float：none和clear：both的類（當發生條件（如單擊）時）。

我在小提琴上做了一個示例： https : //jsfiddle.net/ejeqs8m7/2/只需單擊任何div。

它切換一個看起來像這樣的類.clicked：

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

Answer 2

您可以檢查元素是否在同一水平線上，並使用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>