Question

在我的网站上：http://luukschroder.nl/test/test.html#我正在插入媒体查询以在其他移动设备上正确显示内容。

在主站点上有两个div（#wrap和#scrollbar）彼此相邻显示，我想在较小的移动设备（即iPad）上将它们显示在一行中

这是样式表中的内容：

<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMono Regular" !important;   
}
#scrollbar {
position:absolute;
right: 100;
width: 512px;
text-align: center;
}
#wrap {
float: left;
position: absolute;
left : 120px;
top: 40px;
}
</style>

etc.etc.

这就是适用于iPad的媒体查询css中的内容：

<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMono Regular" !important;
}
#scrollbar {
position:relative;
top:-150px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto; 
}
#wrap { 
width:100%;
position:relative;
top:-100px;
padding: 0px;
float:none;
display: block;
margin-left: auto;
margin-right: auto; 
}
</style>

这是我得到的结果：http://quirktools.com/screenfly/#u=http%3A//luukschroder.nl/test/test.html&w=768&h=1024&a=22

我似乎无法弄清楚我做错了什么......

非常感谢你的帮助!!

Answer 1

您必须分别覆盖媒体上left和rigt上的#wrap和#scrollbar，因为这种风格会影响position: relative，如下所示：

#wrap{
    left: auto;
}

#scrollbar{
    right: auto;
}

无论如何，按照Lister先生的建议修复html中的其他错误。

Answer 2

在您的媒体查询中：对于#scrollbar和#wrap，请尝试将display: block更改为display: inline-block。然后添加float: left

希望有所帮助！

Div不以iPad媒体查询为中心

2 个答案: