html 左右布局中间没间隔,html – CSS布局,中间列是固定宽度和定位,两个外部列流体宽度,没有间距...

曾经听说过

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);

}