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属性中进行调整来实现您提到的方式。我希望你有一个想法来启动它。

Answer 2

以下内容容器包含在悬停时出现的其他内容容器：http://jsbin.com/vepayi/2/edit?html,css,output

点击时需要功能吗？这个用户界面的目的是什么？

Answer 3

我建议不要遵循仅限CSS的路线，只是为了好玩，see fiddle：

<强> 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;
}

即使div换行，浮动内容直接位于所选div下方的div也是如此

3 个答案: