Angular：无法在 PrimeNG FlexGrid 中并排定位两个 p-col-6答案

【问题标题】：Angular : Cannot locate two p-col-6 side by side in PrimeNG FlexGridAngular：无法在 PrimeNG FlexGrid 中并排定位两个 p-col-6
【发布时间】：2019-08-17 16:46:39
【问题描述】：

我在我的 Angular7 项目中使用Flex Grid，但是虽然在第一种情况下行为是正常的，并且我可以并排定位两个 p-col-6，但在将它们移动到 p- 后我无法将它们并排放置col-12。问题来了：

#status 1：

<style>
    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }
</style>

<div class="p-grid">
    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>
</div>

这里没有问题。但是当使用如下所示的时候会出现问题：

#status 2：

<style>
    * {
        -webkit-box-sizing: border-box;
    }

    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }

    .p-col-12 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 100%;
        margin-bottom: 5px;
        max-width: 100%;
    }
</style>

<div class="p-grid">
    <div class="p-col-12">
        <div class="p-col-12">12</div>

    </div>

    <div class="p-col-12">
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-6">
            6
        </div>
    </div>
</div>

但是即使改变宽度属性也不能使 col-6 并排。有什么想法吗？

【问题讨论】：

@OptimumCreative 请回复？
您可以简单地将 .p-grid 类添加到包含两个 .p-col-6 元素的 div.p-col-12 中
@DerAlex 非常感谢 Alex，你太棒了！.. 我将 p-grid 复制到 .p-grid .p-col-12 并现在它正在工作 :) 另一方面，如何在全局两个 p-col-6 之间提供边距？ 我不想将样式属性添加到每个 p-col-6 div 和寻找更好的解决方案。有什么想法吗？

标签： html css angular twitter-bootstrap primeng

【解决方案1】：

问题是您添加的嵌套导致 .p-col-6 不再是 flexbox 父级 .p-grid 的子级。相反，.p-col-6 是块级元素，不会像典型的行方向 flex 子元素那样并排对齐。

<div class="p-grid">                   /* <-- flexbox  parent */
    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-6">          /* <-- NOT a flexbox child */
            6
        </div>
        …
    </div>
</div>

【讨论】：

非常感谢安迪...另一方面，如何在全球范围内提供两个 p-col-6 之间的边距？我不想为每个 p-col-6 div 添加样式属性并寻找更好的解决方案。有什么想法吗？
@Willys 不想添加style property 是什么意思？你的意思是不想再添加一个类名？
我的意思是每个 p-col 6
-6 元素，但我认为我必须这样做。 BUT 在这种情况下，第二个 p-col-6 包裹并向下到第一个 p-col-6。我应该怎么做才能解决这个问题？我只是想设置边距并在两个 p-col-6 div 之间留出空间。
@Willys 我在上面说明了您遇到问题的原因。如果您按原样保留HTML，则需要使用.p-col12 { display: flex; } 来解决您的问题。
它不会进行任何发送，并且在创建.p-col12 { display: flex; } 并添加margin-right: 5px; 之后，第二个 p-col-6 低于第一个。但是当将 p-col-6 的宽度属性减小到 %45 时，它可能没问题。但是，当屏幕调整大小时，它不会很好，因为它会导致 div 之间的间隙增加。