html - 创建对象列表并将它们呈现为图块

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

你有一堆divs，它们是块元素，默认情况下不会并排显示。你可以给它们一个宽度，然后添加float: left;到你的 CSS 中。您的另一个选择是将您的 s 实际更改div为spans。

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 中添加了 pull-left，它完全符合我的要求。