如何使列的宽度与总宽度相等？答案

【问题标题】：how to give column equal width from total width?如何使列的宽度与总宽度相等？
【发布时间】：2015-06-02 01:14:28
【问题描述】：

我正在尝试制作网格视图的示例。我正在动态生成表格视图或网格视图。我需要列占宽度的相等百分比。例如，如果我有两列，它们将占单个列的 50%。如果有三栏那么他们将采取33.33％的个人

请检查我要制作的网格图像

![在此处输入图片描述][1]

这是我的代码

http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview

<div class="row">
    <div ng-repeat="d in data | filter:{checked: true}">
        <div class="col">{{d.label}}</div>
        <div class="row" ng-repeat="column in displayData">
            <div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
        </div>
    </div>
</div>

【问题讨论】：

@BilalAkil 但我正在使用带有角度的离子。如果你看到我的逻辑很复杂
@BilalAkil 可以请你帮忙吗？我有两个动态生成的列，我们可以给两个 50% 的宽度
@BilalAkil，正在使用的控件是 Ionic 控件。结果标记是div 而不是table。所以很遗憾，建议的帖子无法应用
很公平，我会删除我之前的评论并尝试为你想出一些东西。
另请注意，您提供的图像中的列具有不同的宽度

标签： angularjs angularjs-directive angularjs-scope ionic-framework ionic

【解决方案1】：

由于您在包含元素上有display: flex（并且没有关于包装行），如果您只需在每列的<div> 上指定width: 100%，它应该可以正常工作。

我在这里调整了您的 Plunk：http://plnkr.co/edit/YAWmKBsgyevoyrhqfQqO?p=preview - 不同之处在于此元素的 style 属性：

<div style="width: 100%;" ng-repeat="d in data | filter:{checked: true}">...</div>

您可以在此处了解有关display: flex 的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我建议你也复习一下你的课程，因为目前的结构相当混乱。

【讨论】：