Значит, есть у нас div style='width:1024px;'.
Необходимо в этот див запихнуть произвольное количество других div'ов так, что бы они растянулись по ширине на весь родительский div. И что бы у всех была одинаковая ширина.
Без JS.
Как это выглядит:
1. У нас 2 дочерних элемента. Каждый по 512 в ширине.
2. Добавляем третий элемент в исходный код. Обновляем страницу. Ширина каждого дочернего стала 1024/3.
3. Добавляем четвертый. Ширина каждого стала 1024/4=256.
Дочерние элементы выводятся не стабильным количеством, а каждый раз разным.
Т.е. прописать каждому ширину - не вариант. Они сами должны "определить" себе ширину так, что бы в сумме ширина была 1024.
Как это сделать?
-
Появилась идея через table td td td сделать, но хотелось бы через css.– RoanCommented 27 окт. 2012 в 18:20
Добавить комментарий
|
2 ответа
что то типа:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
#content {
display: table;
width: 1024px;
border: 1px solid #000;
}
#content div {
display: table-cell;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div id="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Можно ещё так:
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.content {display: block; width: 1024px; clear: both;}
.content div {display: inline-block; width: calc(1024px / 3); float: left;}