html - 3div 的响应式设计，2 div 的宽度以 px 为单位，其他以 "%"为单位

Question

我有 3divs 左，中，右问题是左侧需要 320px，右侧 150px，中心将占据剩余空间。我怎样才能做到这一点？它需要是 100% 的响应。我不知道屏幕有多大，它可以从1920到1600屏幕分辨率不等，但左右需要固定。

已经发布在评论中的示例有效，但是如果你想在宽度最大为 768 的情况下制作 2 列，并使用 display: none; 隐藏 3d div；它不适用于表格示例。另一个带有 css3 框的也不起作用，因为它在资源管理器中不起作用，没有 pollyfill。

那么有没有解决这个问题的方法，还是我需要用经典的方式来做，并用边距和填充等进行补偿......

Answer 1

您可以为此设置display:table 属性。这样写。

.parent{
    display:table;
    width:100%;
}
.parent > div{
    display:table-cell;
    min-height:200px;
}
.left{
    width:320px;
    background:green;
}
.center{
    background:red;
}
.right{
    width:150px;
    background:yellow;
}

检查这个http://jsfiddle.net/BNQfC/1/

或

您可以使用 CSS3 flex-box 属性。

检查这个http://jsfiddle.net/sjYNy/1/