动态调整 HTML div 对象和子元素的大小

【问题标题】：Resizing HTML div object and child elements dynamically动态调整 HTML div 对象和子元素的大小
【发布时间】：2015-08-08 09:25:07
【问题描述】：

首先要警告的是，我在 HTML、CSS 和 JS 方面几乎是一条鱼，所以在任何回复中都不会太详细。我发现了一些关于 CSS 转换的类似问题，但我的知识有限，我无法判断它们是否是我应该走的路线....

所以我的 MVC 应用程序视图中有一个 HTML 对象。它的形成如下所示，并为列表中的每个项目（基本上是人员对象列表）形成一个类似名片的元素，显示列表中人员的姓名、公司、笔记、图像等。 

<div style="border: 1px solid lightgray;resize: both; overflow: hidden;height:240px;margin-bottom:5px;padding-left:5px;width:320px;">
    <div style="display:inline-block;float:left;width:220px;">
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            @if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("dd MMM yyyy")
            }
            else
            {
                @Html.Raw("n/a")
            }
        </div>
        @if (itm.LastVisit != DateTime.MinValue)
        {
            <div><b>Time Elapsed: </b>@(itm.TimeSinceLastVisit + 1) days<br /></div>
        }
        <div><b>Date Joined: </b>@itm.DateJoined.ToString("dd MMM yyyy")</div>
        <div><b>Company: </b>@itm.Company<br /></div>
        <div><b>Position: </b>@itm.Position</div>

        @if (itm.Notes != null) 
        { 
            <div style="padding-top:5px;"><b>Notes</b></div>
            <div style="width: 220px;">@Html.Raw(System.Web.HttpUtility.HtmlDecode(itm.Notes))</div>
        }
    </div>
    <div class="profileImage" style="height:100%;float:left;margin-left:5px;padding-top:5px;padding-right:5px;text-align:right;">
    @if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" />
    }
    </div>
</div>

随着列表的填充/更改，这些名片元素填充页面形成网格（网格不是预先编程的，从技术上讲，这些元素实际上只是形成一个长行，当前一个被填充时开始一个新行）。

我希望这些元素的大小可变，以便用户可以根据屏幕分辨率或特定用途更改它们的大小。

我如何不仅可以动态调整 div 对象本身的大小，还可以动态调整其所有子元素的大小，包括 img 对象。我希望最终用户可以通过滑块或下拉框来控制它，其中包含 2x2、3x3、4x4 等预设选项......

可以吗？或者有没有其他简单的方法可以替代我的做法？

JK

【问题讨论】：

    标签： javascript c# jquery html css


    【解决方案1】：

    我已经通过将其包含在 html cmets 中删除了大部分服务器端逻辑，只需删除即可恢复您的自定义逻辑。这和你想要的一样吗？

    这里是倍数（下拉）：

    $(function(){
  $('#dim').change(function(){
    var cl='by'+$('#dim option:selected').text();
    $('#deck').removeClass().addClass(cl);
  });
});
    .card {
  border: 1px solid lightgray;
  resize: both;
  overflow: hidden;
  min-height:240px;
  margin-bottom:5px;
  padding-left:5px;
  display: inline-block;
  box-sizing: border-box;
  font-size: 12px;
}
.card .profileImage {
  float:right;
  width: 25%;
  margin: 5px;
}
.card > div > div:last-child { margin-top: 10px; }
.card > div > div:last-child b {display:block;}
ul { font-size: 0; margin:0; padding:0; }
li { margin:0; padding: 0; }
.by2 .card { width: 50%; }
.by3 .card { width: 33%; }
.by4 .card { width: 25%; }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dim'>
  <option selected>2</option>
  <option>3</option>
  <option>4</option>
</select>
<ul id="deck" class='by2'>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>
</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
</ul>

    还有一个滑块：

    $(function(){
  $('#slider').slider({
    value: 9,
    min: 1,
    max: 10
  });
  $('#slider').on('slide',function(event,ui){
      var w=100/(11-ui.value);
      var f=(1-((100-w)/100*(100-w)/100))*30;
      $('.card').css('width',w+'%').css('font-size',f+'px');
    });
  
});
    /* Base styles */
ul { font-size: 0; margin:0; padding:0; }
li { margin:0; padding: 0; }

/* Card style */
.card {
  border: 1px solid lightgray;
  resize: both;
  overflow: hidden;
  min-height:240px;
  margin-bottom:5px;
  padding-left:5px;
  display: inline-block;
  box-sizing: border-box;
  font-size: 22.5px;
  width: 50%;
  transition: all 0.5s ease;
}
.card .profileImage {
  float:right;
  width: 25%;
  margin: 5px;
}
.card > div > div {
  word-break: break-all;
}
/* Card notes styles */
.card > div > div:last-child { margin-top: 10px; }
.card > div > div:last-child b {display:block;}
    <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="slider"></div>
<ul id="deck">
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>
</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
<li class="card">
    <!--@if (itm.ImageUrl != null)
    {
        <img src="~/Content/images/@itm.ImageUrl" class="profileImage" />
    }
    else
    {
        <img src="~/Content/images/No_Photo_Silo.jpg" class="profileImage" />
    }-->
    <img class="profileImage" src="http://placehold.it/100x100" />
    <div>
        <div><h4>@itm.FirstName @itm.LastName</h4></div>
        <div>
            <b>Last Visit: </b>
            <!--@if (itm.LastVisit != DateTime.MinValue)
            {
                @itm.LastVisit.ToString("-->dd MMM yyyy<!--")
            }
            else
            {
                @Html.Raw("n/a")
            }-->
        </div>
        <!--@if (itm.LastVisit != DateTime.MinValue)
        {-->
            <div><b>Time Elapsed: </b><!--@(itm.TimeSinceLastVisit + 1)--> days</div>
        <!--}-->
        <div><b>Date Joined: </b><!--@itm.DateJoined.ToString("-->dd MMM yyyy<!--")--></div>
        <div><b>Company: </b>@itm.Company</div>
        <div><b>Position: </b>@itm.Position</div>

        <!--@if (itm.Notes != null) 
        { -->
            <div><b>Notes</b><!--@Html.Raw(System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div>
        <!--}-->
    </div>

</li>
</ul>

    【讨论】：

    • 感谢您的回复，但我对您的回答感到有些困惑。据我所知，您已经大大简化了整个事情并创建了两个 css 类。我不明白.card &gt; div { } 在做什么，我不确定这将如何使我能够动态调整父 div 元素及其子 div 元素的大小...？
    • 对不起，那堂课什么也没做。我打算使用它，然后意识到我不需要放任何东西。我已经用多张卡片的例子更新了答案。
    • 添加了带有过渡的滑块示例。
    • 谢谢你，我今天会尝试切换到这个，如果成功就点赞
    • 已接受答案。我想知道你是否知道我也可以根据相同的滑块调整文本的大小......？
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-02
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode