0

Значит, есть у нас div style='width:1024px;'.
Необходимо в этот див запихнуть произвольное количество других div'ов так, что бы они растянулись по ширине на весь родительский div. И что бы у всех была одинаковая ширина.
Без JS.
Как это выглядит:
1. У нас 2 дочерних элемента. Каждый по 512 в ширине.
2. Добавляем третий элемент в исходный код. Обновляем страницу. Ширина каждого дочернего стала 1024/3.
3. Добавляем четвертый. Ширина каждого стала 1024/4=256.
Дочерние элементы выводятся не стабильным количеством, а каждый раз разным.
Т.е. прописать каждому ширину - не вариант. Они сами должны "определить" себе ширину так, что бы в сумме ширина была 1024.
Как это сделать?

1
  • Появилась идея через table td td td сделать, но хотелось бы через css.
    – Roan
    Commented 27 окт. 2012 в 18:20

2 ответа 2

0

что то типа:

<!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>
1
  • благодарю. работает :)
    – Roan
    Commented 27 окт. 2012 в 18:35
0

Можно ещё так:

<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;}

https://jsfiddle.net/56gpmymL/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.