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

【问题标题】：Child divs containing images and text have height but parent div does not包含图像和文本的子 div 有高度，但父 div 没有
【发布时间】：2019-12-04 04:45:25
【问题描述】：

我在一个 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 的底部？提前致谢。

【问题讨论】：

标签： html css razor sass

【解决方案1】：

秘诀在于“favorite-item”类需要一个“overflow: hidden”属性。即使这些不是浮动孩子，由于 MVC 对象，这就像浮动孩子一样。此外，模型在加载所有项目之前不会给出高度（并且没有事件告诉我们何时发生......甚至没有文档“准备好”事件），所以我们必须轮询子项目对象检查他们的身高。

【讨论】：