浮動小数点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）内側のボックスを単にフロートします。 いいえ：ブラウザが位置を把握しています。 Bad：あなたのコードがインナーボックスの位置を知らないときに、新しいボックスをどこに挿入するかはどのように決定しますか？

b）使用可能な幅に応じて、列と行にボックスを配置します。 良い：新しいボックスを適切な場所に簡単に挿入できます。 問題：応答性のある課題を作成します。

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

Answer 1

は、私はあなたが浮いているクラスを追加例えば、必要なCSSを変更する必要があり、私は右のあなたの質問を得た願っています：なしクリア：両方際の条件（クリックが発生したよう

私はフィドルに例をしました：。

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

： https://jsfiddle.net/ejeqs8m7/2/ ちょうどdiv要素のいずれかをクリック

それはこのようになります.clickedクラスを切り替えます

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>