html - 响应式设计定位跨度

Question

我有两个带内联块显示的跨度，在响应模式下（对于低于 768X1024 的分辨率）我需要将一个放置在另一个之上，所以我将显示设置为阻止但错误的一个在顶部我怎样才能制作第二个跨度登上顶峰？

谢谢

Answer 1

用float:left在<div>你想上位的地方。

Answer 2

唯一的方法是在你的html代码中向上移动#loginContent，另一方面，你可以使用绝对位置来设置你喜欢的位置。考试：

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

Answer 3

看看这种变化是否有帮助：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;
}

}

希望这可以帮助！