html - 基于 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 .

长话短说:如果布局是自动的，而不是固定的，则宽度由单元格的内容决定，在您的情况下没有内容，因此中间单元格被拉伸(stretch)。如果它是固定的，它会将剩余空间分配给空单元格。