我有5个标签,在移动设备上,我想排列成一堆,奇数标签在顶部而不是底部。目前,我将它们设置为容器宽度的50%,然后向左浮动,但当然它们会先填充顶部。
<div class="tab-row">
<button class="tab active">A</button>
<button class="tab">B</button>
<button class="tab">C</button>
<button class="tab">D</button>
<button class="tab">E</button>
</div>
这是当前代码处理选项卡的选择:
$(".tab").click(function() {
// All versions
$(".tab").removeClass("active");
$(".tab").show();
$(".clone").remove();
// mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs
if(window.matchMedia("(max-width: 1100px)").matches) {
$(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
$(this).hide();
}
// full width
else { $(this).addClass("active"); }
// code to load the tab content elided
});
(有一些单独的代码在将Tab A加载到移动设备时将其置于底部。)
在更早的时候进行工作时,我通过设置clear可以使IIRC有所收获:但是整个克隆js搞砸了它,因此它并不总是以我想要的方式工作。我不知道我只是在做错事,还是走那条路不可行?
我觉得答案肯定很明显,但我无法弄清楚...预先感谢!
有用的插图位于https://i.stack.imgur.com/ttNwW.png。
最佳答案
您可以将display:flex
与flex-wrap: wrap-reverse;
一起使用
$(".tab").click(function() {
// All versions
$(".tab").removeClass("active");
$(".tab").show();
$(".clone").remove();
// mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs
if(window.matchMedia("(max-width: 1100px)").matches) {
$(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
$(this).hide();
}
// full width
else { $(this).addClass("active"); }
// code to load the tab content elided
});
.tab-row{
max-width:100px;
background-color: DodgerBlue;
display: flex;
flex-wrap: wrap-reverse;
}
.tab{
width:35px;
margin:5px;
align-self:flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-row">
<button class="tab active">A</button>
<button class="tab">B</button>
<button class="tab">C</button>
<button class="tab">D</button>
<button class="tab">E</button>
</div>
您也可以在这里进行测试。https://jsfiddle.net/kt39Lp71/1/