CSS div 相互堆叠（用于循环剃须刀页面）答案

【问题标题】：CSS divs stacking on top of eachother (for loop razor pages)CSS div 相互堆叠（用于循环剃须刀页面）
【发布时间】：2022-09-27 15:15:12
【问题描述】：

我知道这个问题已经被回答了一百万次，但我无法让我的 div 堆叠在彼此之下。我尝试了各种 css、grid flex display 等，但无论如何，第二个和第三个 div 堆栈都在第一行的顶部（或侧面）。在我读到的所有地方，都建议将父（第一行）作为绝对，将子作为相对，但这似乎不起作用。

@page
@model IBaiWebApp.Pages.IndexModel
@{DomainLayer.Classes.IBaiManager usr= new();
}

@{
    <div class=\"modularItemBox\">
    @for (int i = 0; i < usr.ProductList.Count(); i++)
            {
            var x = usr.ProductList[i];
            if (i < 4)
            {<div class=\"firstItemRow\">
                <div class=\"itemSquare\">
                    <div class=\"namePricePicSection\">
                        <div class=\"picSquare\"><img class=\"itemPic\" src=\"@x.PictureUrl\" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class=\"descriptionSection\">@x.Description<br></div>
                </div>
            </div>
            }
            else if (i < 8)
            {
                <div class=\"secondItemRow\">
                    <div class=\"itemSquare\">
                        <div class=\"namePricePicSection\">
                            <div class=\"picSquare\"><img class=\"itemPic\" src=\"@x.PictureUrl\" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class=\"descriptionSection\">@x.Description<br></div>
                    </div>
                </div>
            }
            else
            {
                <div class=\"thirdItemRow\">
                    <div class=\"itemSquare\">
                        <div class=\"namePricePicSection\">
                            <div class=\"picSquare\"><img class=\"itemPic\" src=\"@x.PictureUrl\" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class=\"descriptionSection\">@x.Description<br></div>
                    </div>
                </div>
            }
        }
    </div>
}

CSS:
.modularItemBox {
    padding-top: 30px;
    padding-left: 450px;
    display: flex;
    justify-content: center;
    height:1000px;
}
.itemSquare {
    height: 200px;
    width: 200px;
    background-color: #fde55f;
    border-block: double black;
    border-left: double black;
    border-right: double black;
    display:inline-flex;
}
.itemPic {
    height: 90px;
    width: 90px;
}
.namePricePicSection{
    height:50%
}
.descriptionSection{
    height:50%;
    
}
.firstItemRow {
    position: relative;
    height: 200px;
    
}
.secondItemRow {
    position: absolute;
    height: 200px;
    padding-bottom: 200px;

}
.thirdItemRow {
    position: absolute;
    height: 200px;
}

目前 firstItemRow 位于正确的位置，而 secondItemRow 和thirdItem 行应该在它下面但不是。对不起这个愚蠢的问题

编辑：https://jsfiddle.net/fw29jn4k/，不幸的是我找不到剃须刀页面 jsfiddle 等效 :(

亲切的问候

标签： html css asp.net-core razor-pages

【解决方案1】：

您可以尝试在每一行之外添加一个 div：

@for (int i = 0; i < usr.ProductList.Count(); i++)
            {
            var x = usr.ProductList[i];
            <div class="test">
            if (i < 4)
            {<div class="firstItemRow">
                <div class="itemSquare">
                    <div class="namePricePicSection">
                        <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class="descriptionSection">@x.Description<br></div>
                </div>
            </div>
            }
            </div>
            if(usr.ProductList.Count()>4){
                <div class="test">
            }
            if (i < 8 &&i > 4)
            {
                <div class="secondItemRow">
                    <div class="itemSquare">
                        <div class="namePricePicSection">
                            <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class="descriptionSection">@x.Description<br></div>
                    </div>
                </div>
            }
            if(usr.ProductList.Count()>4){
               </div>
            }
            if(usr.ProductList.Count()>8){
               <div class="test">
            }
            if(i>8)
            {
                <div class="thirdItemRow">
                    <div class="itemSquare">
                        <div class="namePricePicSection">
                            <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class="descriptionSection">@x.Description<br></div>
                    </div>
                </div>
            }
            if(usr.ProductList.Count()>8){
               </div>
            }
        }
    </div>
}

CSS：

<style>
.modularItemBox {
    padding-top: 30px;
    padding-left: 450px;
    
    justify-content: center;
    height:1000px;

}
.itemSquare {
    height: 200px;
    width: 200px;
    background-color: #fde55f;
    border-block: double black;
    border-left: double black;
    border-right: double black;
    display:inline-flex;
}
.itemPic {
    height: 90px;
    width: 90px;
}
.namePricePicSection{
    height:50%
}
.descriptionSection{
    height:50%;
    
}
.test{
    display: flex;
}
.firstItemRow {
    position: relative;
    height: 200px;
    display:inline-block;
    
}
.secondItemRow {
    position: relative;
    height: 200px;
    padding-bottom: 200px;
    display:inline-block;

}
.thirdItemRow {
    position: relative;
    height: 200px;
    display:inline-block;

}

</style>

结果：

【讨论】：