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

Question

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

截图:

http://s22.postimg.org/69aqe1i29/panel.jpg

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

仅在 CSS 中这可能吗？

直接链接到相关页面:http://idenitties.com/vanilla/profile/3/test1

Answer 1

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

http://tinker.io/9d3f8/1

.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

http://caniuse.com/#feat=flexbox