html - 包含图像和文本的子 div 有高度，但父 div 没有

问题描述

我在cshtml文件中动态创建了一些div“最喜欢的项目”。它们包含一个项目 div，其中包含一个由模型动态生成的 img 和 span 标签。大多数项目会立即加载，但有些项目需要一些时间。在此期间，在速度较慢的手机上，您可以看到图标聚集在整个包含父 div 的底部。父 div 和 favourite-item 子 div 的高度为 0，即使某些图像和跨度具有高度而某些没有。它们应该以大约 2 列图像宽的块格式布局。

这是cshtml：

<div class="MyFavorites" style="position: relative;">
<h5 class="title-section">@Model.MyFavoriteTitle</h5>
@if (Model.MyFavoriteCustomizeLink != null)
{
    <a href="@Model.MyFavoriteCustomizeLink.Url" class="favorites-customize"><i class="fa fa-gear"></i></a>
}
<div class="row collapse panel favorites">
    <div class="row" data-equalizer>
        @if (Model.FavoriteLinks != null && Model.FavoriteLinks.Count() > 0)
        {
            foreach (var item in Model.FavoriteLinks.Where(link => !link.IsDeleted))
            {
                var url = (item.LinkUrl ?? String.Empty).Trim();
                var target = (item.LinkTarget ?? String.Empty).Trim();
                if (item != null && item.FavoriteIcon != null) //temporary fix for null issues
                {
                    var fi = item.FavoriteIcon;
                    <div class="column small-6 favorite-item" data-equalizer-watch>
                        <a href="@url" target="@target" class="item">
                            @if (fi != null && fi.FavoriteIconImage != null)
                            {
                                @RenderImage(item, o => o.FavoriteIcon.FavoriteIconImage, new { Class = "icon" }, isEditable: false);
                            }
                            <span>@item.FavoriteTitle</span>
                        </a>
                    </div>
                }
            }
        }
        else
        {
            <p class="column empty-list-message">@Html.Raw(UtilityHelpers.SafeRichTextHtml(Model.MyFavoriteListEmptyMessage_HomePage))</p>
        }
    </div>
</div>

这是scss：

@include breakpoint(small only) {
.item-container {
    display: none; // hide by default
    margin-right: -0.71429rem !important;
    margin-left: -0.71429rem !important;
}

.show-mobile {
    display: block !important;
}

.panel.favorites {
    padding: 1.25em 2.75em;
}

.favorites .favorite-item {
    text-align: center;
    margin-bottom: 1.1em;

    .item {
        display: block;
    }

    .item > img {
        display: block;
        max-width: 85%;
        margin: 0 auto;
    }
}

为什么我最喜欢的项目 div 的高度为 0？什么是不让他们所有最喜欢的项目 div 都聚集在父“收藏夹”div 的底部？提前致谢。

标签： htmlcssrazorsass

html - 包含图像和文本的子 div 有高度，但父 div 没有

问题描述

解决方案

推荐阅读