Разметка третьих столбцов с помощью 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%;
}

Я получу наценку вот так .

Как правильно создать камеруразметка?

------- Отредактировано ------------------------------- Я должендобавьте этот код, чтобы решить мою проблему.

content

{display: table; ширина: 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/