Question

我正在尝试制作网格视图的示例。我动态生成表格视图或网格视图。我需要列等于宽度的％。例如，如果我有两列，它们将占用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>

Answer 1

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

我已在此处调整了您的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/

我建议您也检查一下您的课程，因为目前的结构很混乱。

如何从总宽度给出相等宽度的列？

1 个答案: