响应式设计中的定位跨度

Question

我有两个使用行内块显示的span，当分辨率低于768X1024时，我需要将它们堆叠，所以我将display属性设置为block，但是第二个span出现在了上面，我应该如何让第二个span处于上面呢？

谢谢。

- vovina

Answer 1

唯一的方法是在您的HTML代码中向上移动＃loginContent，另一方面，您可以使用绝对位置将它们的位置设置为所需位置。例如：

#attensions{
    position: absolute;
    top: 180px;
}
#loginContent{
    position: absolute;
    top: 0;
}

- bobsilon

Answer 2

看看这个变化是否有帮助：

http://jsfiddle.net/panchroma/RLSkL/

重要的是，我颠倒了HTML中两个div的顺序，然后使用CSS来管理布局

CSS

/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}

#attensions{
width:330px;
float:left;
}

.LgnBtn{
clear:both;
}

/* for tablets and smartphones, remove the floats above */

@media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}

#attensions{
width:100%
float:inherit;
}

}

希望这能有所帮助！

- David Taiaroa

Answer 3

在想要置于顶部的 <div> 上使用 float:left。

- eclipsis

---

我已经尝试过了，没有收获 :| - vovina

你能否创建一个包含你的代码的JSFiddle？ - eclipsis

http://jsfiddle.net/parissa/aUJPm/ 这里有两个span，#attensions和#loginContent。当你调整大小时，#attensions在顶部，我需要#loginContent在顶部。 - vovina

为什么不把 #loginContent 的 HTML 代码移到 #attensions 上面呢？像这样：http://jsfiddle.net/mA8Zw/ - eclipsis

我不能这样做，因为在正常模式下它们的位置不应该改变 :/ - vovina