如何使一个div自动改变高度?

时间:2019-01-12 17:52:24

标签: html css asp.net-mvc

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

<div id=team-logo-wrapper>的CSS

#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,并且我有类似的内容 enter image description here

如何更改CSS样式或HTML以自动更改高度。因为如果我添加新团队,我必须更改身高。

2 个答案:

答案 0 :(得分:0)

请添加显示内容以使内容灵活,并使内容与中心属性对齐以对齐。同时删除高度

答案 1 :(得分:0)

我认为您在float标签上使用了li属性。如果您使用float属性,则需要清除它。

在ul之后,请加上div

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

并添加样式

.clear{
 clear:both;
}