浏览器大小的HTML CSS

我一直在使用下面的CSS代码：浏览器大小的HTML CSS

#MainBox 
{ width: 488px; 
    height: 181px; 
    position: absolute; 
    left: 50%; 
    top: 236px; 
    margin-left: -244px; //this being half the width 
}

要确保页面上的项目中心。问题是，当在iphone上查看此内容（并且我假设其他智能手机上的内容类似）时，页面的左侧被切掉！有谁知道我可以如何解决这个问题，并使一切变得健康？

谢谢！

来源

2012-09-21 user1677820

你被244px与CSS移动元素的左，iPhone屏幕这么小，这是导致它被切断。试试这个：

#MainBox{ 
    width: 488px; 
    height: 181px; 
    margin: 236px auto 0 auto; 
}

来源

2012-09-21 16:59:18

我要补充一点，这种类型的CSS并不适用于所有的屏幕尺寸很好的解决方案，因为即使在你上面的内容将向下236px推这大概是iPhone屏幕高度的一半。您应该查看使用媒体查询的响应式设计 –

以上以div为中心的技术已经过时了。使用边距：自动，宽度为一个固定值（您已经拥有），并使父亲位置：相对。

来源

2012-09-21 17:00:33

浏览器大小的HTML CSS

回答

相关问题