Question

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

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

我想要：按钮 - 细节;按钮 - 细节;按钮 - 细节

<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>

问题在于：W3C

你知道解决方案吗？或者是每个盒子的最佳解决方案重复按钮，只显示小分辨率（并隐藏原始按钮）？

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

Answer 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/

向左浮动将确保元素直接相继。

响应框的问题

1 个答案: