在动态场景中管理CSS浮动

Question

从上面可以看出，Category3应该低于SubCat的List，但是它就在它旁边。当Category2有SubCats时，事情可以正常工作，但是当任何类别中没有子类时，就会发生这种浮动。

以下是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; }

Answer 1

好像你需要在#catDiv上使用最小高度来确保它至少足够高以匹配带有subCats的“完整”div（可能使用ems）。这应该会把事情搞得一团糟。

Answer 2

尝试将此类添加到您的css：

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

并试着像这样使用它：

<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 class="clear"></div>
    }
</div>