Еще раз сегодня я наткнулся на проблему, которую я всегда встречаю с макетами css. Я хотел бы иметь 5 дивизий в горизонтальном ряду. Скажем, например, их ширина должна быть:
где * означает "заполнить оставшееся пространство". В прежние времена это было то, как мы планировали таблицы ширины. В настоящее время из-за причин доступности html-таблицы запрещены для макетов. Это просто пример. Я ищу общее решение.
Кто-нибудь знает генератор, легкое решение для javascript (может быть плагин jQuery), учебник, книгу или волшебник, которые могут помочь мне решить эту проблему сейчас и навсегда?
Несмотря на то, что решение на основе javascript возможно, предпочтительным будет решение не script.
Вы можете использовать display:table, чтобы создать этот эффект, я быстро сделал fiddle
Это делает индивидуальный div действительным, как ячейки таблицы, а section - это таблица, я использовал раздел, чтобы иметь более чистый код, а также div.
Вы заметите, что ячейки таблицы становятся меньше, чем вы указали, если размер окна слишком мал, это из-за поведения по умолчанию в таблице. Для борьбы с этим просто добавьте минимальную ширину (с тем же значением, что и ширина)
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>
Перейди палец! С недавними броузерами вы можете сделать это сейчас!