第三列用CSS3标记没有浮点数

Question

我想知道，我可以这样做标记仅使用display: table; and display: table-cell列：

例如，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/