Question

在下面的示例中，我有三行（用.row标记的div）并将宽度设置为33％以使它们具有相同的大小并填充整个区域。问题是这些.row div是动态生成的，有时而不是三个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%; }

依此类推，直到达到您可能拥有的最大列数。你需要进行一些健全性检查，以确保你的“计数”课程不会太高，但这些方面的东西都可行。

不幸的是，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+'%');
}

计算div的宽度

3 个答案: