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

Question

我有 3divs left, center, right 问题是左边需要 320px，右边 150px 和 center 将占据其余的空间。我怎样才能做到这一点？它需要是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/