2

私は mvc 4 Web アプリケーションに取り組んでいます。私は初心者です（数日前に始めたばかりなので、よろしくお願いします）。

したがって、Repositoryクラスからビューにデータを取得することができました。ここでは問題ありません。しかし、問題は、このデータを水平方向に 2 列に表示し、各列に 2 つのブロックを配置するようにしたいということです。これまでのところ、データは上から下に垂直に配置されています。 

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

上記のコードは、私が行っていることの簡略化されたバージョンです。しかし、繰り返しますが、データはリストのように上から下に表示されます。データを次のように表示したい:

A  B
C  D

どんな助けでも大歓迎です。

ありがとうございました

4

2 に答える 2

2

（厄介なテーブルを使用せずに）目標を達成できる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）の幅に合わせたサイズのフロー要素として配置されます。

記事をグリッドのようなパターンで配置する必要があるため、これらの特定の要素を「ブロック」としてレンダリングするようにブラウザに指示する必要があります。さらに、2つのブロックだけが含まれているDIV内に並んで収まるように、ブロックを親内でフローさせる必要があります。

したがって、CSSスタイルを使用すると、次のことができます。1. DIVの幅を固定サイズに設定します2.記事を「インラインブロック」スタイルとしてレンダリングするように設定します3.記事の幅を設定して、各行に2つだけが収まるようにしますオプション： 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 に答える