css - 在动态场景中管理CSS float

从上方可以看到，Category3应该在SubCat的列表下方，但是它紧随其后。当Category2具有SubCat时，一切正常，但是当任何Category中都没有Subcat时，就会发生这种浮动。

以下是ASP.NET Razor代码：-

<div class="rightDiv">
        @foreach (var cat in Model)
        {
            <div class="catDiv">
                <h2>@cat.CategoryName</h2>
                @foreach (var subCats in cat.SubCategories)
                {
                   <h4>@subCats.CategoryName</h4>
                }
            </div>
        }
    </div>

对应的CSS代码：-

div.rightDiv { float:left; width:750px; }
div.rightDiv div.catDiv { float:left; width:50%; }
h4 { display:inline; padding-right:10px; }

最佳答案

似乎您需要在#catDiv上设置最小高度，以确保其至少高到足以将“ full” div与subCats匹配（也许使用ems）。那应该把事情推倒。