Динамическое изменение объекта div и дочерних элементов HTML

Прежде всего, предупреждение о том, что я довольно много рыбы из воды с HTML, CSS и JS, поэтому ни один уровень детализации не будет слишком большим в любых ответах. Я нашел некоторые аналогичные вопросы, касающиеся CSS-преобразований, но с моими ограниченными знаниями, я не могу сказать, являются ли они маршрутом, по которому я должен идти вниз.Динамическое изменение объекта div и дочерних элементов HTML

Итак, у меня есть объект HTML в представлении моего MVC приложение. Он формируется, как показано ниже, и формирует элемент визитной карточки как элемент для каждого элемента в списке (список объектов людей в основном), отображая имя, компанию, заметки, изображение и т. Д. Людей в списке.

<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 и т. Д.

Можно ли это сделать? Или есть простые альтернативы тому, как я это делаю?

источник

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

Извините, этот класс ничего не сделал. Я собирался использовать его, тогда понял, что мне нечего было туда заложить. Я обновил ответ на примере нескольких карт. –

Добавлен пример слайдера с переходами. –

Динамическое изменение объекта div и дочерних элементов HTML

ответ

Смежные вопросы