时间戳

首页 > 解决方案 > Flex 不会像示例中所示那样插入

html - Flex 不会像示例中所示那样插入

问题描述

我只是想通过使用下面的代码在PrimeNG Flex上使用 Nested flex 的修改示例：

<h3>Nested</h3>
<div class="p-grid nested-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-12">
                <div class="box">12</div>
            </div>
        </div>
    </div>
    <div class="p-col-4">
        <div class="box box-stretched">4</div>
    </div>
</div>

但是，col div 的总大小不是 12，而是 11，如果总 p-col 数为 12 或更多，则元素将换行到我不想要的下一行。另一方面，我查看了所有主要的 div 和主体填充和边距，但没有问题。我认为 p-cols 的填充不会导致这个问题，它们的填充也是 0-5 px 范围。知道如何解决这个问题吗？

标签： htmlcssflexboxprimeng

解决方案

网站中的示例显示有点像这样

我不认为你需要'p-grid nested-grid'

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

推荐阅读