Html 计算div的宽度

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

个人一年会员资格
终身会员
商务一个月会员
.membership表{text align:center；}
.membership表。行{显示：内联块；边距：0；填充：0；宽度：33%；}
.成员表.标题{颜色：#c30000；字体大小：15px；字体重量：粗体；}

如果您正在寻找纯CSS解决方案。您将需要css3 box flex：

但这在像IE这样的旧浏览器中不起作用

另一种解决方案是使用jQuery执行此操作，例如：

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

这会将每行的宽度设置为100/行数

---

演示：

如果您正在寻找纯CSS解决方案。您将需要css3 box flex：

但这在像IE这样的旧浏览器中不起作用

另一种解决方案是使用jQuery执行此操作，例如：

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

这会将每行的宽度设置为100/行数

---

演示：

您可以在页面上使用Jquery吗？ 如果是：

我已经编辑了，因为除零是不可能的（如果其中没有行）

---

您可以在页面上使用Jquery吗？ 如果是：

我已经编辑了，因为除零是不可能的（如果其中没有行）

---

最简单的方法是使用Javascript，计算行数并相应地编辑大小。我倾向于使用jQuery，并将使用如下内容：

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

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

另一种方法是服务器端：当服务器端脚本在行中循环时，添加一个在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中没有一种方法可以动态地进行数学运算。这是一个CSS3模块(http://www.w3.org/Style/CSS/specs#math)但在任何主流浏览器中都没有什么支持或动力。

最简单的方法是使用Javascript，计算行数并相应地编辑大小。我倾向于使用jQuery，并将使用如下内容：

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

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

另一种方法是服务器端：当服务器端脚本在行中循环时，添加一个在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中没有一种方法可以动态地进行数学运算。这是一个CSS3模块(http://www.w3.org/Style/CSS/specs#math)但在任何主流浏览器中都没有多少支持或动力支持它。

简单的答案是用JavaScript实现这一点。你需要看代码吗？简单的回答是用JavaScript来做这件事。你需要查看代码吗？divPercentage将包含100这将不起作用，你需要测量行的长度而不是表的长度。divPercentage将包含100这将不起作用，你需要测量行的长度而不是表的长度。我在Chrome 12、Firefox 5和IE9上试过所有这些浏览器都支持flex box。谁在乎旧浏览器和css 2呢？我希望我也能这么说。但我的客户在这里有另一种看法；）Ups，我的错误，IE9不支持显示：框。无论如何，我将使用您的jQuery解决方案。如果成员表中没有任何.row，则$（“.membership table.row”）。length=0，表示除以0。你的意思是：显示：块？显示：据我所知，block是受支持的。我在Chrome12、Firefox5和IE9上试过，所有这些浏览器都支持FlexBox。谁在乎旧浏览器和css 2呢？我希望我也能这么说。但我的客户在这里有另一种看法；）Ups，我的错误，IE9不支持显示：框。无论如何，我将使用您的jQuery解决方案。如果成员表中没有任何.row，则$（“.membership table.row”）。length=0，表示除以0。你的意思是：显示：块？显示：据我所知，块是受支持的。如果.membership表中没有任何行，会发生什么？除以零？通过第二行中的一个小的健全性检查很容易修复：if（rows.length）rows.width（（100/rows.length）+'%'）；如果.membership表.row中没有任何行，会发生什么？除以零？通过第二行中的一个小的健全性检查很容易修复：if（rows.length）rows.width（（100/rows.length）+'%'）；