在css中格式化网格状div

时间:2014-12-18 18:07:19

标签: html css

所以我在将数据格式化为3行时遇到了一些麻烦,然后让4开始在下一行的顶部。我也在bootstrap 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>
}

这是我试过的一个解决方案,在做行之前我只是想看看我是否可以在一行中组织它们然后我会转到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>

1 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/a5800uj5/

不确定这是否是您要找的? 请记住,您可以使用colspan来覆盖一个单元格应覆盖的列数。

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