Question

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

所以我设法将Repository类的数据导入View。这里没问题。但问题是我想让它成为水平显示的数据，分为两列，每列有两个块。到目前为止，数据是垂直排列的，从上到下。

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

以上代码是我正在进行的简化版本。但同样，数据显示就像列表，从上到下显示，我希望数据显示如下：

A  B
C  D

非常感谢任何帮助。

谢谢

Answer 1

实现目标的一种方法（不使用讨厌的表格）就是使用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彩色边框

此方法导致以下布局： enter image description here

HTH。

Answer 2

根据我的评论，您可能想要的是这样的，使用<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>

没有测试过，但粗略地说这会做或者给你一个想法。：）

将mvc存储库获取的数据定位到视图中（MVC4 Web）

2 个答案:

将mvc存储​​库获取的数据定位到视图中（MVC4 Web）

2 个答案:

将mvc存储库获取的数据定位到视图中（MVC4 Web）