Макеты div в css, как ячейки таблицы в таблицах HTML

Еще раз сегодня я наткнулся на проблему, которую я всегда встречаю с макетами css. Я хотел бы иметь 5 дивизий в горизонтальном ряду. Скажем, например, их ширина должна быть:

1: 60 px,
2: 30%,
3: 40px,
4: *
5: 100px

где * означает "заполнить оставшееся пространство". В прежние времена это было то, как мы планировали таблицы ширины. В настоящее время из-за причин доступности html-таблицы запрещены для макетов. Это просто пример. Я ищу общее решение.

Кто-нибудь знает генератор, легкое решение для javascript (может быть плагин jQuery), учебник, книгу или волшебник, которые могут помочь мне решить эту проблему сейчас и навсегда?

Несмотря на то, что решение на основе javascript возможно, предпочтительным будет решение не script.

Ответ 1

Вы можете использовать display:table, чтобы создать этот эффект, я быстро сделал fiddle

Это делает индивидуальный div действительным, как ячейки таблицы, а section - это таблица, я использовал раздел, чтобы иметь более чистый код, а также div.

Вы заметите, что ячейки таблицы становятся меньше, чем вы указали, если размер окна слишком мал, это из-за поведения по умолчанию в таблице. Для борьбы с этим просто добавьте минимальную ширину (с тем же значением, что и ширина)

Ответ 2

http://jsfiddle.net/lnplnp/bFrmD/

#div1 {
    width: 60px;
}
#div2 {
    width: 30%;
}
#div3 {
    width: 40px;
}
#div4 {
}
#div5 {
    width: 100px;
}
.layout {
    display:table;
}
.cell {
    display: table-cell;
}

<html>
    <head>
        <title>DIV LIKE TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="div1" class="cell">1</div>
            <div id="div2" class="cell">2</div>
            <div id="div3" class="cell">3</div>
            <div id="div4" class="cell">4</div>
            <div id="div5" class="cell">5</div>
        </div>
    </body>
</html>

Перейди палец! С недавними броузерами вы можете сделать это сейчас!