調整大小HTML DIV對象和子元素動態

警告第一關，我是一個很值得離開水的魚與HTML，CSS和JS所以沒有詳細程度未免太高了任何反應。我發現解決CSS變換一些類似的問題，但我的知識有限，我不能告訴，如果他們是我應該走下去的路線....調整大小HTML DIV對象和子元素動態

所以，我有我的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對象。我想這是用戶通過滑塊最終控制或下拉框中包括像2×2，3×3，4×4等預設選項....

能不能做到？或者，我是如何做到這一點的簡單替代方案？

來源

2015-05-26 JonnyKnottsvill

我已經在HTML註釋括起來去除大部分的服務器端邏輯的，只是刪除恢復您的自定義邏輯。這就像你想要的東西？

下面是它的倍數（下拉菜單）：

$(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"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](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"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
<li class="card"> 
 
    <[email protected] (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> 
 
      <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
      { 
 
       @itm.LastVisit.ToString("-->dd MMM yyyy<!--") 
 
      } 
 
      else 
 
      { 
 
       @Html.Raw("n/a") 
 
      }--> 
 
     </div> 
 
     <[email protected] (itm.LastVisit != DateTime.MinValue) 
 
     {--> 
 
      <div><b>Time Elapsed: </b><[email protected](itm.TimeSinceLastVisit + 1)--> days</div> 
 
     <!--}--> 
 
     <div><b>Date Joined: </b><[email protected]("-->dd MMM yyyy<!--")--></div> 
 
     <div><b>Company: </b>@itm.Company</div> 
 
     <div><b>Position: </b>@itm.Position</div> 
 

 
     <[email protected] (itm.Notes != null) 
 
     { --> 
 
      <div><b>Notes</b><[email protected](System.Web.HttpUtility.HtmlDecode(-->itm.Notes<!--))--></div> 
 
     <!--}--> 
 
    </div> 
 

 
</li> 
 
</ul>

來源

2015-05-26 16:04:22

感謝，但我的反應有點混亂d通過你的回答。從我收集你大大簡化了整個事情，並創建了兩個CSS類。我不明白什麼是'.card> DIV { }'是幹什麼的，我不確定這會如何使我能夠動態調整父div元素和它的子div元素...？ – JonnyKnottsvill

對不起，那個班什麼都沒做。我打算使用它，然後意識到沒有什麼我需要在那裏。我已經用多張卡片的例子更新了答案。 –

添加了帶轉場的滑塊示例。 –

調整大小HTML DIV對象和子元素動態

回答

相關問題