html - 3 列 css，中间固定大小，左右流动

Question

我正在尝试使用以下内容呈现 3 列设计:

• 中间固定宽度为 660px

• 剩下的左右各一半但最小宽度:120px

• 中间的 div 应该在屏幕上居中

我发现的一切都是关于修复左右列并让中间列流动，但我想要完全相反的东西。我已经使用

部分实现了我的目标

display: inline-block;
vertical-align: top;

这是 fiddle .

缺少的是右侧和左侧 div 的正确大小调整。当窗口调整大小时，660/sizeofwindow 发生变化，因此左侧和右侧 div 的百分比值不再正确。

Answer 1

使用calc实现这一目标。

这是一种原生 CSS 方法，可以直接在 CSS 中进行简单的数学运算，以替代任何长度值。

请注意，calc 并不适用于所有浏览器。

写:

#left, #right {
    min-width:120px;
    width:calc(50% - 330px); // half of 660px
}

当您使用 display:inline-block 时，请确保您的 div 之间没有任何空格，因为 inline-block 会在元素之间留下空白。

查看更新 fiddle在这里。