html - 在CSS中格式化类似网格的div

Question

所以我在将数据格式化为 3 行时遇到了一些问题，然后让 4 从下一行的顶部开始。我也在引导 CSS 框架中这样做。

请原谅我极其糟糕的设计，但这就是我要说的:

Stack won't let me post images, so this is a link to the image. On my github, it's safe

再说一遍，我正在尝试这样组织我的数据(这将在 foreach 循环中)。我尝试了几件事，但似乎没有任何效果。

@foreach (var question in Model)
{
    string link = "http://www.stackoverflow.com" + @question.QuestionLink;

    <tr>
        <td class="col-sm-6 col-md-4">
            <div class="media" style="width: 150px; float: left;">
                <a class=" pull-left" href="@link" style="width: auto; height: 72px;">
                    <h4 class="media-heading">@Html.DisplayFor(modelItem => question.QuestionTitle)</h4>
                </a>
            </div>
        </td>
    </tr>
}

这是我尝试过的一种解决方案，在做行之前我只是想看看我是否可以将它们组织成 1 行，然后我会移动到 2。

这是当前代码的结果:

Stack won't let me post images, so this is a link to the image. On my github, it's safe

此外，我知道这是在 C#HTML 中，但 html/css 部分完全相同，所以如果您不知道 foreach 循环部分或“@”符号，请不要担心.

如果感到困惑，仅更新 HTML 部分

<div class="container">
<tr>
    <td class="col-sm-6 col-md-4">
        <div class="media" style="width: 150px; float: left;">
            <a class=" pull-left" href="link" style="width: auto; height: 72px;">
                <h4 class="media-heading">Title</h4>
            </a>
        </div>
    </td>
</tr>
</div>

Answer 1

http://jsfiddle.net/a5800uj5/

不确定这是否是您要找的东西？请记住，您可以使用 colspan 指定一个单元格应覆盖的列数。

如果您要使用表格进行结构化。一直将它们用于表格、表格标题、表格行和表格列。