Question

我在页面的正确内容中心遇到了问题。

我的HTML页面是2列页左列固定（高度100％和宽度350px）和右侧内容宽度是575px所以我想在所有屏幕右侧内容中心例如屏幕宽度是1600px所以它采取正确1250px的侧内容中心（1600px-350px。

谢谢高级

Answer 1

http://caniuse.com/#feat=calc calc（）是一种用于数学运算的原生CSS方法。我们现在可以为内容列设置动态宽度。对calc（）的桌面支持相当不错。不支持calc（）时添加了回退。基于父级的最大宽度1600px添加的％宽度回退。

html,body {
margin:0;
padding:0;
height:100%;
}

.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}

.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}

.content {

width:78.125%;/* fall back */
width:-moz-calc(100% - 350px); 
width:-webkit-calc(100% - 350px); 
width:calc(100% - 350px);
float:left;
background:green;
}

Answer 2

使用jquery根据屏幕分辨率计算宽度，然后动态应用宽度，如果你把代码放在这里我可以告诉你如何动态应用jquery代码。

根据javascript中可以从此函数获得的分辨率计算宽度：

window.innerWidth

Answer 3

您可以使用亲戚。

拥有正确内容的容器，绝对定位并应用left等于左div的固定宽度，并应用right:0将其扩展到剩余宽度。

然后只需使用旧的（因此有更多的浏览器支持）margin:0 auto将内容放在正确的容器div的中心......

<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
    <div id='content'></div>
</div>
</div>

CSS

html, body {
  height:100%;
}
#wrap {
 position:relative;
 height:100%;
}
#left {
 display:inline-block;
 width:150px; // in your case 350
 height:100%;
 border:1px solid;
}
#right {
 position:absolute;
 top:0;
 left:150px; // width of left content
 right:0px;
 height:100%;
}
#content {
 width:575px;
 height:100%;
 margin:0 auto;
 border:1px solid;
}

JSFiddle

Answer 4

从right_content div中删除float: left属性，并在父div上添加text-align: center，即右边一个div。

所有屏幕右侧内容中心

4 个答案: