响应框的问题答案

【问题标题】：Problems with the responsive boxes响应框的问题
【发布时间】：2016-02-25 01:32:54
【问题描述】：

我的响应框有问题。我有三个按钮。单击按钮后会显示一个详细信息框。我想在小分辨率下为每个框连续显示按钮和详细信息框。

现在：按钮，按钮，按钮；细节，细节，细节；

我想要：按钮 - 细节；按钮 - 详细信息；按钮 - 详细信息

<div class="container clearfix">
    <a class="tab1" href="#">first</a>
    <a class="tab2" href="#">second</a>
    <a class="tab3" href="#">third</a>
</div>

<div class="box detail1">
    <div>detail 01</div>
</div>
<div class="box detail2">
    <div>detail 02</div>
</div>
<div class="box detail3">
    <div>detail 03</div>
</div>

这里有问题：https://jsfiddle.net/izmy666/xnyydvb6/

您知道解决方案吗？还是最好的解决方案是为每个框复制按钮并仅以小分辨率显示（并隐藏原始按钮）？

感谢您的任何建议或建议！

【问题讨论】：

您的意思是按钮和框并排还是在另一个的下一行？
我想要在第一行三个按钮和第二行详细信息框中的正常分辨率。在响应式分辨率（@media 屏幕和（最大宽度：600px））中，我希望在每个单独的行上：按钮第一 - 细节 01 - 按钮第二 - 细节 02 - 按钮第三 - 细节 03。
那么你必须复制和隐藏原来的按钮了。

标签： jquery html css responsive-design

【解决方案1】：

你需要把你的html改成一个接一个

<div class="container clearfix">
    <a class="tab1" href="#">first</a>
    <div class="box detail1">
        <div>detail 01</div>
    </div>
    <a class="tab2" href="#">second</a>
    <div class="box detail2">
        <div>detail 02</div>
    </div>
    <a class="tab3" href="#">third</a>

<div class="box detail3">
    <div>detail 03</div>
    </div>
</div>

在.box 下添加float:left;。这将达到您想要的结果。我已经保存了 jsfiddle。 https://jsfiddle.net/xnyydvb6/3/

左浮动将确保元素一个接一个。

【讨论】：

不，我只想要响应式分辨率（@media screen and (max-width: 600px)）。在正常分辨率下，我想要前三个按钮，然后是详细信息框。