响应式设计定位跨度

时间:2013-07-31 19:13:24

标签: html css responsive-design

我有两个带有内联块显示的跨度,在响应模式下(分辨率低于768X1024)我需要将一个放在另一个上面,所以我将显示设置为阻止但是错误的显示在顶部我该如何制作第二个跨度是最重要的?

感谢

3 个答案:

答案 0 :(得分:0)

float:left上使用<div>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

查看此变体是否有帮助: 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;
}

}

希望这有帮助!