2

我正在开发一个 mvc 4 Web 应用程序。我是新手（几天前才开始，所以请对我好点）。

所以我设法将数据从一个Repository类中获取到一个视图中。这里没问题。但问题是我想让这些数据水平显示，分两列，每列有两个块。到目前为止，数据是垂直排列的，从上到下。 

<div id="myID">
    @foreach(var stuff in Model)
    {
        <article>@stuff.title</article>
    }
</div>

上面的代码是我所做的简化版本。但同样，数据显示就像列表一样，从上到下显示，我希望数据显示如下：

A  B
C  D

任何帮助将不胜感激。

谢谢

4

2 回答 2

2

实现目标的一种方法（不使用讨厌的表格）是使用 CSS 来布局您的文章。

探索此类 HTML 相关问题的更简单方法是创建一个简单的 HTML 页面，其中仅包含您要查找的元素：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div#articles {
            width: 450px;
            border: solid 1px red; /* For debugging purposes */
        }

        div#articles article{
            display: inline-block;      /* Force the article to be displayed in a rectangular region laid out next to one another */
            margin: 5px;                /* Leave a little room between each article */ 
            width: 200px;               /* Limit the maximum width of the article so that only two fit side-by-side within the div */
            text-align: center;         /* Center the text horizontally */
            vertical-align: middle;     /* Center the text vertically */
            border: solid 1px green;    /* For debugging purposes - so you can see the region the articles live within */
        }
    </style>
</head>
<body>
    <div id="articles">
        <article>Article A</article>
        <article>Article B</article>
        <article>Article C</article>
        <article>Article D</article>
    </div>
</body>
</html>

文章、段落等通常布置为流动元素，其大小与包含它们的元素的宽度（您的示例中的 DIV）相同。

您希望您的文章以类似网格的模式布局，因此您需要告诉浏览器将这些特定元素呈现为“块”。此外，您希望块在其父级中流动，这样只有两个块可以并排放置在包含的 DIV 中。

因此，使用 CSS 样式，您可以： 1. 将 DIV 的宽度设置为固定大小 2. 将文章设置为“内联块”样式 3. 设置文章的宽度，以便每行只能容纳两个 可选： 4. 必要时将文章文本居中 5. 设置文章的边距以在每篇文章之间留出一点空间 6. 为了更好地查看每个元素所在的区域，请使用简单的 1px 彩色边框

这种方法导致以下布局： 在此处输入图像描述

HTH。

于 2012-11-30T00:59:48.643 回答
0

按照我的评论，你可能想要的是这样的东西，<table>用来安排你的输出。

<div id="myID">
    @{
      int count = 0;
      <table>
      @foreach(var stuff in Model)
       {
        if (count % 2 == 0){ <tr> }     
            <td>
              <article>@stuff.title</article>
            </td>
        @if (count % 2 == 1) { </tr> }
         count++;
        }
       </table>
    }
 </div>

还没有测试过，但大致上这会做或给你的想法。:)

于 2012-11-30T00:50:27.797 回答