如何从总宽度给列相等的宽度? [英] how to give column equal width from total width?

问题描述

我正在尝试制作网格视图的示例.我动态生成表格视图或网格视图.我需要列的宽度相等.例如，如果我有两列，则它们将单独占用 50%.如果有三列然后他们将采取33.33％的个人

请检查我正在尝试制作的网格图像

![在此处输入图片说明][1]

这是我的代码

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

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

解决方案

由于您在包含元素上有 display: flex(并且没有关于包装行)，如果您使用它应该可以正常工作只需在每列的

上指定 width: 100%.

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

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

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

I am trying to make example of grid view .I am dynamically generate the table view or grid view .I need column take equal % of width .Example if I have two column they will take 50% with individual .If there is three column then they will take 33.33% individual

Please check image of grid what I am trying to make

![enter image description here][1]

Here is my code

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>

解决方案

Since you've got display: flex (and nothing about wrapping rows) on the containing element, it should work fine if you simply specify width: 100% on each column's <div>.

I've adjusted your Plunk here: http://plnkr.co/edit/YAWmKBsgyevoyrhqfQqO?p=preview - the difference is the style attribute on this element:

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

You can learn more about display: flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I recommend you also review your classes, since the current structure is quite confusing.

这篇关于如何从总宽度给列相等的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！