Question

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

截图：

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

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

这可能只是CSS吗？

指向相关网页的直接链接：http://idenitties.com/vanilla/profile/3/test1

Answer 1

最好的方法是在HTML中交换<div>，但你可以使用一点绝对定位来移动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

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

3 个答案: