Рассчитать ширину для divs

Question

В приведенном ниже примере у меня есть три строки (div, помеченные .row) и я установил ширину 33%, чтобы они имели одинаковый размер и заполняли всю область. Проблема заключается в том, что эти .row div генерируются динамически, и иногда вместо трех div может быть четыре или два div. В таком случае, как установить ширину? Например, если есть два деления, ширина должна быть 50% для обоих.

<div class="membership-table">

        <div class="row">
            <div class="title">
                Personal One Year membership 
            </div>        
        </div>


        <div class="row">
            <div class="title">
                Lifetime membership
            </div>          
        </div>


        <div class="row">
            <div class="title">
                Business One Month membership
            </div>                 
        </div>

</div>

.membership-table { text-align: center; }

.membership-table .row { display: inline-block; margin: 0; padding: 0; width: 33%; }

.membership-table .title { color: #c30000; font-size: 15px; font-weight: bold; }

Answer 1

Самый простой способ - использовать Javascript для подсчета строк и изменения размеров соответственно. Я склонен использовать jQuery и использовать что-то вроде следующего:

var rows = $('.membership-table .row');
rows.width((100/rows.length)+'%');

Другой способ сделать это - на стороне сервера: когда скрипт на стороне сервера проходит по строкам, добавьте имя класса, которое определено в CSS, чтобы иметь определенную ширину. Например, в PHP:

$rows = [row1, row2, row3...];
$count = count($rows);
foreach ($rows as $row) {
    echo '<div class="row count'.$count.'">';
    echo '    <div class="title">';
    echo '        Personal One Year membership';
    echo '    </div>';
    echo '</div>';
}

Затем в своем CSS добавьте следующее:

.count1 { width:100%; }
.count2 { width:50%; }
.count3 { width:33%; }
.count4 { width:25%; }
.count5 { width:20%; }

И так далее, пока вы не достигнете максимального количества столбцов, которое у вас может быть. Вам нужно будет выполнить некоторые проверки работоспособности, чтобы убедиться, что ваши классы 'count' не слишком высоки, но что-то в этом роде будет работать.

К сожалению, в CSS нет способа делать математику на лету. Это модуль CSS3 (http://www.w3.org/Style/CSS/specs#math), но в любом из основных браузеров за ним очень мало поддержки или стимула.

Answer 2

Если вы ищете чистое решение CSS.Вам понадобится css3 box-flex: http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

Но это не будет работать в старых браузерах, таких как IE.

Другим решением будет сделать это с помощью jQuery, например:

$(".membership-table .row").css( "width", 100 / $(".membership-table .row").length + "%" )

Это установит ширину каждой из ваших строк в 100 / количество строк.

демо: http://jsfiddle.net/4zGxZ/1/

Answer 3

Можете ли вы использовать Jquery на странице?Если да:

Я редактировал, потому что разделить ноль невозможно (если в нем нет строк)

    var divLength = $(".membership-table .row").length;
if (divLength)>0
{
    var divPercentage = 100/ divLength;
    $('.membership-table .row').css('width',divPercentage+'%');
}