浮動div內容直接位於所選div下方，即使div換行

Question

在此先感謝您的協助。

我正在嘗試創建帶有邊框（正方形）的固定高度/寬度div的行：

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]

當單擊其中一個div時，具有與單擊的div相關的內容的另一個div將顯示在下面：

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]
--^----------------------------------------
CONTENT #1
-------------------------------------------

要么

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]
--------^-----------------------------------
CONTENT #2
--------------------------------------------

我的所有工作都很好，但是我想改善代碼，以便從分辨率較低的設備上查看頁面，並使用divs 1-5換行，具有相應內容的div會位於相應div的正下方：

[ 1 ] [ 2 ] [ 3 ] 
--------^-----------------------------------
CONTENT #2
--------------------------------------------
[ 4 ] [ 5 ]

代替...

[ 1 ] [ 2 ] [ 3 ]
        ^
[ 4 ] [ 5 ]
-------------------------------------------
CONTENT #2
--------------------------------------------

我正在尋找不需要笨拙的javascript來預先確定屏幕分辨率等的解決方案。

我已經有一段時間了，有人對我有什么想法或想法嗎？

最好的祝福

馬特

Answer 1

您必須使用css border-bottom屬性來執行此操作，以便div定位的任何位置都將在其底部放置邊框。 通過使用此邏輯，可以通過相對於瀏覽器寬度操縱div寬度並在css屬性中進行調整來實現上述方法。 我希望您有個主意。

Answer 2

這是內容容器，其中包含一個附加的內容容器，該容器在懸停時出現： http : //jsbin.com/vepayi/2/edit?html,css,output

您需要點擊功能嗎？ 這個用戶界面的目的是什么？

Answer 3

ID建議不要遵循僅CSS路線，而只是為了好玩， 請參閱小提琴 ：

的HTML

<div class="box">
    <div class="num">
        <div class="num_in"><a href="#hell1">1</a>
        </div>
        <div id="hell1" class="hid">hello!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell2">2</a>
        </div>
        <div id="hell2" class="hid">hello 2!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell3">3</a>
        </div>
        <div id="hell3" class="hid">hello3!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell4">4</a>
        </div>
        <div id="hell4" class="hid">hello 4!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell5">5</a>
        </div>
        <div id="hell5" class="hid">hello 5!</div>
    </div>
</div>

的CSS

.box {
    display:block;
    border:1px solid #f00;
}
.num {
    display:inline-block;
    width:200px;
    border:1px solid #000;
    margin:10px;
    vertical-align:top;
    text-align:center
}
.hid {
    display:none;
    transition: all 1.5s ease-in-out;
}
.hid:target {
    display:block;
}