在div

Question

我完全陷入困境。我基本上要做的是： 我想在div内部分割元素，并证明该行上的第一个元素将在左侧旁边，并且该行上的最后一个元素将在右侧旁边。如果有更多元素，它应该转到下一行并重复该过程。以下是一个示例 - ＆gt;

{A | B | C | D}
{E | K

我的代码：HTML：

<div class="webso-products">
    <div [ngClass]="'ui card webso-card'" *ngFor="let product of allProducts">
        <app-product></app-product>
    </div>
</div>

我的代码CSS：

.webso-products {
    display: block;
    width: 100%;
    height: auto;
    text-align: justify;
}

.webso-products .webso-card {
    display: inline-block;
    background-color: #1b2a47;
    border: none;
    box-shadow: none; 
    padding: 1rem 1rem 0rem 1rem; 
}

我尝试 使用伪元素：after（宽度：100％并显示：inline-block），但是当使用Angular时它不知何然不起作用迭代... 的

真的很感谢你的帮助。

Answer 1

你能做到吗？

<div class="webso-products">
    <div [ngClass]="'ui card webso-card'" *ngFor="let product of allProducts">
        <div class="webso-card-product">
            <app-product></app-product>
        </div>
    </div>
</div>

和

.webso-card{display:flex; flex-direction:row}
.webso-card-product{width=25%}
@media #{...} {
    .webso-card-product{width=...}
}