Question

我对移动设备有一个奇怪的问题。我有三个div设置位置：绝对;，我用左边：;将它们直接放在三个相应的按钮下。所有东西都在桌面上完美地融合在一起，但在移动设备上，所有三个div都向右移动了大约200px。我在页面底部还有一个div，其中包含一个facebook页面插件，其行为方式类似。这是我的意思截图，使用Chrome的移动仿真开发工具：Here http://gruntwork.us/reelindi/test/screenshot.jpg

以下是有问题的div的代码：

CSS：

div.filmMakers{
    position: absolute;
    background-color: #fff;
    text-align: left;
    width: 15.4%;
    max-width: 15.4%;
    height: auto;
    left: 364;
    margin-top: 15px;
    font-size: 0.7em;
    font-style: normal;
    font-family: 'Libre Baskerville',sans-serif;
}
div.features{
    position: absolute;
    background-color: #fff;
    text-align: left;
    width: 13%;
    max-width: 13%;
    height: auto;
    left: 612;
    margin-top: 15px;
    font-size: 0.7em;
    font-style: normal;
    font-family: 'Libre Baskerville',sans-serif;
}
div.clients{
    position: absolute;
    background-color: #fff;
    text-align: left;
    width: 11%;
    max-width: 11%;
    height: auto;
    left: 832;
    margin-top: 15px;
    font-size: 0.7em;
    font-style: normal;
    font-family: 'Libre Baskerville',sans-serif;
}

HTML：

<div class="filmMakers">
    <p style="text-align:center; margin-top: -5px; margin-bottom: 1px;"><strong>Multi-Media Professionals.</strong><br>Creative journals, step-by-step tutorials, tech reviews, blogs.</p>
</div>
<div class="features">
    <p style="text-align:center; margin-top: -5px; margin-bottom: 1px;"><strong>Upcoming Features.</strong><br>Project investment opportunities, coming soon to the silver screen.</p>
</div>
<div class="clients">
    <p style="text-align:center; margin-top: -5px; margin-bottom: 1px;"><strong>Production Interests.</strong><br>Work with us to build your ideas.</p>
</div>

facebook页面插件的HTML：

<div style="margin-left: 200px; margin-top: -85px; margin-right: 100px; width:400px; border: solid #fff; border-width: 0px 0px 1px 0px; font-size: 0.8em;">
    <div class="fb-page" data-href="https://www.facebook.com/reelindi/" data-width="400" data-height="100" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/reelindi/"><a href="https://www.facebook.com/reelindi/">Reel Indi</a></blockquote></div></div>
</div>

任何有关此的帮助将不胜感激。纯CSS和jQuery都是选项，但对于移动开发者来说，我并不是特别熟悉。

在移动设备上，Div向右移动约200px

0 个答案: