我有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:flexflex-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/

10-07 19:05
查看更多