Question

这仅适用于Chrome浏览器，其他人没有spirte按钮......

我有一个网站，应该在平板电脑和手机上重新组织横向和纵向视图。它在桌面和平板电脑上看起来不错，但在手机上查看时，所有元素都会重叠。这是网站：http://cit-blogs.com/R00092575/responsive/index.html

重叠div的CSS如下所示：

@media (min-width: 480px) and (orientation landscape){
    .leftPanel {left: 0%; position: absolute; top: 190%; width: 33%; height: 33%;}
    .buttons {left: 45%; position: absolute; top: 190%; width: 40%;}
    .rightPanel {left: 67%; position: absolute; top: 190%; width: 33%;
}

和

@media screen and (max-width: 380px){
    .buttons {clear: both; left: 15%; position: absolute; top: 80%; width: 40%;}
    .leftPanel {clear: both; margin-left:auto; margin-right:auto; top: 90%; width:100%;}
    .rightPanel {clear: both; margin-left:auto; margin-right:auto; top: 130%; width:100%;}
}

我尝试在重叠的元素周围放置一个div，另一个重叠的div周围但它没有工作。我是CSS的新手，不知道该做什么，静态定位似乎并没有将所有div横向放在屏幕上，所以我不认为我可以使用它，如我网站上的帮助页面所示。

实际的CSS中有一个面板设置为手机大小不可见。这是为了证明特定的CSS被看到了。平板电脑和桌面Css越来越受欢迎。任何人都可以告诉我如何修复手机的CSS，以便按钮，广告和Twitter提供不重叠文本和视频，但也根据横向和肖像视图的需要重新调整水平和垂直位置。这就是好消息http://jsfiddle.net/Sheeno_no_no/dZCjL/

Answer 1

如果你在谈论你的.buttons位于屏幕中间，你在第242行的样式表中有一个媒体查询，它将它们从屏幕顶部放置52％。你可能也希望在该屏幕宽度上隐藏Twitter提要。如果你使用按钮作为页脚，你可以在平板电脑或桌面上将它们固定在底部，然后在较小的屏幕上只有postion:static，这样当用户滚动到页面时它就是页面上的最后一个元素底部。你也可以结束;遗失在你的CSS的某个地方。我想这就是为什么你会看到电视和音乐这个词的原因

验证您的html和css at W3C

Answer 2

排序好了。制作了一个容器div .bottomBox {margin-left:auto; margin-right:auto; width:100%;}，但是leftPanel和rightPanel分别左右浮动，例如.rightPanel {float: right; width: 30%;}，并将按钮和登录框放入列表<ul> <li></li>，按钮CSS为.buttons {margin-left:auto; margin-right:auto; width:10%;}这使得两侧的面板都具有中间的登录和按钮而没有任何重叠。对于portait模式，只需将面板设置为与bottomBox相同。

CSS div元素与屏幕大小重叠

2 个答案: