在CSS中的侧面板中切换对象

问题描述

我在论坛上每个成员的个人资料页面中都有两个框，我想切换。

I have two boxes within each of my member's profile page on my forum that I would like to switch.

屏幕截图：

我想要我的徽章部分下方的关于部分

I want the "About" section below the "My Badges" section

只是CSS？

直接链接到有问题的页面：

direct link to page in question: http://idenitties.com/vanilla/profile/3/test1

推荐答案

重新排序HTML是你最好的选择。如果这是生成的内容，您无法以任何方式修改它，您可以使用Flexbox对其进行重新排序。

Reordering the HTML is your best option. If this is generated content and you're unable to modify it in any way, you can use Flexbox to do reorder them.

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.about {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

<div class="container">
    <div class="about">
        About (first in source)
    </div>

    <div class="badges">
        Badges (second in source)
    </div>
</div>

上面是你不需要知道任何一个元素的大小。缺点是浏览器支持有限：IE10，Chrome，Opera，Firefox，Safari

The up side is that you don't need to know the sizes of either of the elements. The down side is that browser support is limited: IE10, Chrome, Opera, Firefox, Safari

这篇关于在CSS中的侧面板中切换对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！