html - 内容直接位于所选 div 下方的 float 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
--------------------------------------------

我的一切工作正常，但我想改进我的代码，以便如果从分辨率较小的设备查看页面，并且 div 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 属性中进行调整来实现您提到的方式。我希望你有一个想法来启动它。