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

问题描述

我试图让例如网格视图的。我是动态生成表视图或网格视图。我需要考虑的列宽。例同等％，如果我有两个列，他们将采取50％的个人。如果有三栏，然后他们将采取33.33％，个别

请检查网格什么，我试图让图像

！[此处输入的形象描述] [1]

下面是我的code

http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=$p$ PVIEW

 ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV NG重复=，在数据D |过滤器：{检查：真正}＆GT;
        ＆LT; D​​IV CLASS =山坳＆GT; {{d.label}}＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =行NG-重复=，在displayData列＆GT;
            ＆LT; D​​IV CLASS =山坳NG重复=字段column.columnsNG秀=d.fieldNameOrPath == field.fieldNameOrPath＆GT; {{field.value}}＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

既然你已经有了显示：弯曲（约包裹行无）包含的元素上，它应该正常工作，如果你只需指定宽度：100％每列的＆LT; D​​IV＆GT;

我在这里调整您的普拉克： http://plnkr.co/edit ？/ YAWmKBsgyevoyrhqfQqO p = preVIEW - 不同的是这个元素的风格属性：

 ＆LT; D​​IV的风格=宽度：100％; NG-重复=，在数据D |过滤器：{检查：真正}＆GT; ...＆LT; / DIV＆GT;
 

您可以了解更多关于显示：弯曲在这里：
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屋！