曾经听说过
CSS Tables和
calc ??
注意:此解决方案符合CSS3,因此IE8及以下版本不支持此答案!! 🙂
HTML
left
cent
right
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
div { /* just for demo */
height:300px;
border:1px solid red
}
.container {
display:table;
width:100%;
height:100%;
table-layout:fixed;
}
.left, .right, .cent {
display:table-cell /*aabara-kaa-dabara*/
}
.cent {
width:225px; /* fixed center */
}
.left, .right {
width : calc(50% - 225px) /* make left and right divs fluid */
}
编辑
如果你想让中心在rezise上感觉到移动,你将不得不玩相邻的divs宽度…类似于:
.left {
width : calc(30% - 225px);
}
.right{
width : calc(70% - 225px);
}