html - 第三列使用 CSS3 标记，不带 float

Question

我想知道，我可以只使用 display: table; 做这个标记吗？并显示:列的表格单元格:

例如，第 1 列和第 3 列的宽度是屏幕的 15%，最后一个是 70%。

如果我尝试这样做:页:

    #content #left-column
{
    display: table-cell;
    width: 15%;
}

#content #mainContent
{
    display: table-cell;
    padding-right: 22px;
    width: 70%;
}

#content #right-column
{
    display: table-cell; /* width: 300px;*/
    width: 15%;
}

我会得到这样的加价 .

如何创建正确的标记？

--------已编辑--------------------------------我必须添加这段代码来解决我的问题。

内容

{ 显示:表格； 宽度:100%；

Answer 1

似乎您的代码有效。我只是用 display: table; 添加了父元素，没问题。

#content
{
    display: table;
    width: 100%;
}

#content div
{
    border: 1px dashed #000;
}


#content #left-column
{
    display: table-cell;
    width: 15%;
}

#content #mainContent
{
    display: table-cell;
    padding-right: 22px;
    width: 70%;
}

#content #right-column
{
    display: table-cell; /* width: 300px;*/
    width: 15%;
}

可能你有标记错误，你用过这样的东西吗？

<div id="content">
    <div id="left-column">
        Left column
    </div>
    <div id="mainContent">
        Main Content
    </div>
    <div id="right-column">
        Right column
    </div>

</div>

http://jsfiddle.net/2dMfZ/1/