Управление CSS-плавающими в динамических сценариях

Question

Как видно из вышеизложенного, категория 3 должна быть ниже списка SubCat, но она занимает место рядом с ним. Когда у Category2 есть SubCats, все работает нормально, но когда нет подкатов ни в одной из категорий, это происходит с плавающей точкой.

Ниже приведен код бритвы ASP.NET: -

<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, чтобы убедиться, что она достаточно высока, чтобы соответствовать «полному» div с subCats (возможно, с использованием 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>