在动态场景中管理 CSS 浮动

发布于 2024-12-09 01:11:39 字数 804 浏览 0 评论 0原文

在此处输入图像描述

正如您从上面看到的，Category3 应该位于 SubCat 列表下方，但它占据了旁边的位置它。当 Category2 有 SubCats 时，一切正常，但当任何 Category 中没有子目录时，就会发生这种浮动。

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

原文

enter image description here

As you can see from above that the Category3 should be below SubCat's List, but it's taking the place next to it. When Category2 has SubCats then things work fine but when there are no subcats in any Category, this floating around happens.

Following is the ASP.NET Razor Code :-

<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>

Corresponding CSS Code :-

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

埋情葬爱 2024-12-16 01:11:39

似乎您需要 #catDiv 上的最小高度，以确保它至少足够高以匹配带有 subCats 的“完整”div（可能使用 em）。这应该会把事情压下去。

回复收藏 0 原文

り繁华旳梦境 2024-12-16 01:11:39

尝试将此类添加到您的 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>

try to add this class to your css:

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

and try to use it like this:

<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>

回复收藏 0 原文

~没有更多了~