Question

我想知道为什么this site的桌面css的内部包装不起作用。

基本上如果将内部包裹设置为margin:0 auto; and width: auto;则没有问题，但它不是以页脚或主div为中心

当我有内部包装时，因为它当前设置为margin:0 auto; and width:960px;，您会注意到在调整窗口大小后页面呈现水平滚动条，并且所有内容都被压缩到左侧，白色背景开始变得可见。

是否有流畅的过渡到下一个平板电脑尺寸布局而没有出现滚动条并且内容被压扁？

Answer 1

它显示了Scrollbar，因为你在.innerwrap

中应用了填充

Read this article about the Box Model

当将100％宽度应用于父元素时，在某些元素的侧面使用填充，这是不可推荐的，因为它会增加整个组的宽度，并且由于您重新使用浏览器宽度，它会显示滚动条以查看额外空间你补充说。

我的拙见是，如果你想让一个块元素显示为居中，只要应用margin:auto样式规则，同样也必须显示为没有浮动的块元素。

删除它：

    .innerwrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

保持此

.innerwrap {
    margin: auto;
    width: 960px;
}

由于您为社交图标应用了固定边距，因此它们会显示放错位置，因此请勿使用固定边距对其进行居中，而应使用百分比宽度。

你可能想要使用一个公共类来对齐它们

.social {
    background-position: center center;
    background-repeat: no-repeat;
    display: block !important;
    float: none;
    height: 150px;
    margin: auto;
    padding-top: 50px;
    width: 30% !important;
}

对于a.twittersocial和a.twittersocial：悬停和其他社交链接只保留背景属性。

如果需要将常用样式规则应用于多个元素（如果有多个元素）并且尽可能避免使用ID选择器，则创建一个确定的类，而不是使用类（.daclass）。

使用Firebug等网络检查器来跟踪样式错误。

祝你好运开发者！

使用960px桌面内部包装进行奇怪的大小调整

1 个答案: