創建對象的列表，並提供它們瓷磚

Question

現在我有這個正在生產

我希望他們下一次是每個像一個3x3的立方體

下面的代碼生成的東西圖片。

<div class="container" style="border: 1px solid blue; padding: 10px"> 
@foreach (var m in Model.FilteredMatches) 
{ 
<div class="span3"> 
<a href=@Url.Action("Details", "Member", new { id = m.UserId }) class="thumbnail"> 
<div class="span4 " style="border: 1px solid red; padding: 10px"> 
<img src="@m.Photo.PhotoURL" class="img-responsive " style="max-height:300px;max-width:200px"/> 
    </div> 
<div class="span2 " style="border: 1px solid black; padding: 10px"> 
<h5>@m.Username</h5> 
<h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5> 
<h5>@m.City, @m.State.Name,@m.State.Country.Name</h5> 
</div> 
</a> 
</div> 
} 
</div> 

我也不知道爲什麼引導心不是放置跨度旁邊的海誓山盟。

Answer 1

您有一堆div s，它們是塊元素，默認情況下不會相互顯示。您可以給這些寬度，然後將float: left;添加到您的CSS。您的其他選擇是實際上將您的div s更改爲span s。

Answer 2

@foreach (var m in Model.FilteredMatches) 
{   
<div class="span3 pull-left"> 
    <a href=@Url.Action("Details", "Member", new { id = m.UserId }) class="thumbnail"> 
      <div class="span4 " style="border: 1px solid red; padding: 10px"> 
       <img src="@m.Photo.PhotoURL" class="img-responsive " style="max-height:300px;max-width:200px"/> 
     </div> 
      <div class="span2 " style="border: 1px solid black; padding: 10px"> 
       <h5>@m.Username</h5> 
       <h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5> 
       <h5>@m.City, @m.State.Name,@m.State.Country.Name</h5> 
     </div> 
    </a> 
</div> 
} 

在上面的代碼中添加了左上角的div，它完全符合我的要求。