基于 Table/Table-cell 的 3 列布局在 Chrome 和 Opera 上不起作用

Question

我不确定为什么这在 Chrome 或 Opera 上不起作用。我没有看到任何与其他浏览器不兼容的内容。

有什么想法吗？

jsFiddle：http://jsfiddle.net/3vugadj6/

        <style>
            #page_body_table {
                display: table;
                width: 100%;
                vertical-align: center;
            }

            #page_body_left {
                display: table-cell;
                max-width: 100%;
            } 

            #page_body_middle {
                display: table-cell;
                width: 700px;
                border: 1px solid black;
            }

            #page_body_right {
                display: table-cell;
                max-width: 100%;
            }

            @media screen and (max-width: 700px) {
                #page_body_left, #page_body_right {
                    display: none;
                }
            }
        </style>
        <div>
        <center id="page_body_table">
            <div id="page_body_left">

            </div>
            <div id="page_body_middle">
                this is content of page
            </div>
            <div id="page_body_right">

            </div>
        </center>
    </div>

Answer 1

您必须添加：table-layout: fixed; 到 #page_body_table 并使其看起来像这样：

#page_body_table {
    display: table;
    width: 100%;
    vertical-align: center;
    table-layout: fixed;
}

这是fiddle。

解释可以在here找到。

长话短说：如果布局是自动的，而不是固定的，宽度由单元格的内容决定，在你的情况下是无，所以中间的单元格被拉伸。如果它已修复，它会将剩余空间分配给空单元格。