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

Question

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

截屏：

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

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

这仅在 CSS 中可能吗？

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

Answer 1

最好的方法是<div>在 HTML 中交换，但您可以使用一点绝对定位来移动 div。

例如，这将起作用：

.about{
position: absolute;
width: 230px;
bottom: -30px;
}

但我想说最好的选择是只更改 HTML 中的顺序，简单的复制粘贴。

Answer 2

如果盒子高度是恒定的，您可以使用相对定位来切换它们。我的意思是您可以将顶盒向下移动以获得底盒的高度，否则。

.Box.About {
   position: relative;
   top: 114px;
}

.Box.PeregrineBadgesBox {
   position: relative;
   top: -178px;
}

Answer 3

重新排序 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