1

我遇到了网站http://www.swiftkey.net。

在我的宽屏上，我看到内容区域两侧的灰色背景。在我的常规（1024x768）上，灰色条不存在。

他们是如何实现这种效果的？

使用萤火虫，我能够破译我认为可能会这样做：

.w1 {
    float: left;
    width: 1600px;
    position: relative;
    left: 50%;
}
.w2 {
    float: left;
    width: 1600px;
    position: relative;
}

我确实有 CSS 和 HTML 的经验，但上面的代码对我来说有点神秘，特别是考虑到 w2 在 w1 中。

4

2 回答 2

2

我在假设您正在谈论的灰色条是第二个示例图像中显示的灰色条的情况下回答这个问题：

示例截图 1 示例截图 2

简单的答案是页面使用了一个横向居中的静态最大宽度的包装器：

#wrapper {
    max-width: 1000px;
    margin: 0 auto; //centers a block element
}

<body>灰色条是通过在or<html>元素上具有背景颜色来创建的：

body {
    background-color: #888;
}

我还没有检查源代码以查看这些样式的具体设置位置，我将把它作为练习留给读者。

于 2012-09-25T18:26:54.423 回答
0

这必须通过 javascript 屏幕对象来完成

var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;

考虑到任务栏和滚动条等，availWidth 和availHeight 给出了实际可用的宽度和高度。宽度和高度给出了实际的屏幕分辨率。然后访问变量并决定布局的类型。

然而，将任何东西调整到中心很容易

div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}

javascript 屏幕宽度跟踪用于更多控制选项

于 2012-09-25T18:10:39.897 回答