Как сделать div, который автоматически меняет высоту?

Question

У меня есть код в cshtml

<div id=team-logo-wrapper>
  <ul>
    @foreach (Team team in Model)
    {
        <li>
            <div class="team-section-box">
                <p class="team-name">@team.Name</p>

                <img src="@Url.Content(string.Format("~/Images/NBAlogoImg/{0}", team.Path))"
                     class="logo-images" alt="Логотип @team.Name"
                     title="Логотип @team.Name" />

                @Ajax.ActionLink("Открыть статистику",
                    "GetTable",
                    "Home",
                    new { name = team.Name },
                    new AjaxOptions { UpdateTargetId = string.Format("result-table-ajax-id-{0}", team.Id), HttpMethod = "POST" },
                    new {  @class = "table-link-ajax", onclick = string.Format("ShowTable({0})", team.Id) }
               )
            </div>
        </li>
    }
  </ul>
</div>

и css для <div id=team-logo-wrapper>

#team-logo-wrapper {
margin: auto;
border: 1px solid #ff0000;
height: 290px;
background-color: rgba(234, 234, 234, 0.64);
margin-top: 50px;
}

Когда я изменяю height: 290px; на height: auto;, div не содержит ul, и у меня есть что-то подобное

Как изменить стиль CSS или HTML, чтобы сделать высоту с автоматическим изменением. Потому что, если я добавлю новую команду, мне придется изменить высоту.

Answer 1

Я думаю, что вы используете float свойство в теге li. Если вы используете float свойство, его необходимо очистить.

после ul, пожалуйста, введите div как

<div class="clear"></div>

и добавить стиль

.clear{
 clear:both;
}

Answer 2

Пожалуйста, добавьте отображение, чтобы согнуть и выровнять содержимое по центру свойств для выравнивания Также снимите высоту