Question

首先警告我，我几乎是用水，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>

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

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

如何动态调整div对象本身，以及包括img对象在内的所有子元素。我最终通过滑块或下拉框来控制用户，包括预设选项，如2x2,3x3,4x4等....

可以吗？或者我可以轻松地选择这样做吗？

JK

Answer 1

通过将其封装在html注释中，我删除了大部分服务器端逻辑，只需删除即可恢复自定义逻辑。这有点像你想要的吗？

这是倍数（下拉列表）：

＆＃13;

$(function(){
  $('#dim').change(function(){
    var cl='by'+$('#dim option:selected').text();
    $('#deck').removeClass().addClass(cl);
  });
});

＆＃13;

.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%; }

＆＃13;

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

＆＃13;

还有一个滑块：

＆＃13;

$(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');
    });
  
});

＆＃13;

/* 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;}

＆＃13;

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

＆＃13;

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

1 个答案: