2

我在 CSS 上遇到了一些真正的问题！

我进行了以下设置以使#Box div 居中，它可以在除移动浏览器之外的所有设备上完美运行。因为移动浏览器的屏幕尺寸太窄了，左手边一直被截断。我之前问过类似的问题，但试图调整它无济于事。

自上次以来，我已将容器和布局 div 放入，但仍然出现相同的问题。有什么办法可以调整代码以使左侧不会被砍掉？

    .pageContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        padding-left: 1.82%;
        padding-right: 1.82%;
        position:relative; }

    #LayoutDiv1 {
        clear: both;
        margin: auto;
        width: 100%;
        display: block;
        text-align:center;
        position: relative; }

    #Box {
        width: 487px;
        height: 181px;
        position: absolute;
        left: 50%;
        top: 236px; 
        margin-left: -244px;
        z-index:6; }

的HTML：

    <body>
<div class="pageContainer">
    <div id="LayoutDiv1">
    <div id="Twitter">
    <a href="http://www.twitter.com/wekaptureit" target="new"><img     src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
    </div>

<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>

<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>

    </div>
    </div>
    </body>
4

2 回答 2

2

2012 年更聪明的方法是使用媒体查询，这里有一些灵感

您基本上创建了另一个样式表，它只为较小的屏幕加载。现在看起来可能有点矫枉过正，但随着您网站的发展，您会感谢我提出这个建议（或者您不能；））

另外，不要这样做margin-left: -244px;，它很hacky并且可能导致跨浏览器问题。向我们展示一些 HTML，我们将向您展示一种更简洁的方式。

于 2012-09-24T11:52:32.987 回答
0

您是否包含视口元标记？它应该消除您在移动设备中可能遇到的任何缩放问题。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

对你来说 CSS: <div>s 是块元素，它们的默认行为是扩展其父级的宽度（100%）。那些 CSS 声明不是必需的。

从您的代码和布局来看，您似乎不需要#LayoutDiv1或使用定位。

这个更简单的代码负责左侧截止（这是一个小提琴）：

.pageContainer {
    margin:0 auto;
}

#LayoutDiv1 {
        margin: auto;
        text-align:center;
}

#Box {
    width: 487px;
    height: 181px;
    top: 236px; 
    margin:236px auto 0;
}

就像之前提到的海报一样，您可以添加一个@media 查询来为移动设备上的#Box 加载较小的图像（您可以简单地在现有的 CSS 文件中添加一两行 [或 200]）：

@media only screen and (max-width: 767px) {
    #Box { background:url('imgs/mobile-hero.jpg'); }
}
于 2012-09-24T14:01:47.183 回答