ASP.NET MVC 3 を使用して...
注: 3 つの行 (母音、フル ネーム、子音) を垂直に並べることができませんでした。ビュー ディスプレイに実際に表示される方法です。アルファベット文字と、名前の上または下にある母音 (上) か子音 (下) かを判断するのは簡単です。使用されるアルファ「変換」は、数値で AI = 1 ～ 9、JR = 1 ～ 9、SZ = 1 ～ 8 です。
ビューから:
<!--
<table>
<span style="font-family:Monospace;">
<tr>
<td style="font-weight:bold; text-align:right;">Vowels</td>
<td style="font-family:monospace; font-weight:bold; width:215pt;">@Html.DisplayFor(model => model.Vowels)</td>
<td style="font-family:monospace; font-weight:bold;">@Html.DisplayFor(model => model.VowelReduction)</td>
</tr>
<tr>
<td style="font-weight:bold; text-align:right;">Full Name</td>
@if(Model.BMName == null || Model.BMName == "")
{
<td style="font-family:monospace; font-weight:bold; width:215pt;">@Html.DisplayFor(model => model.BFName) @Html.DisplayFor(model => model.BLName)</td>
}
else
{
<td style="font-family:monospace; font-weight:bold; width:215pt;">@Html.DisplayFor(model => model.BFName) @Html.DisplayFor(model => model.BMName) @Html.DisplayFor(model => model.BLName)</td>
}
<td style="font-family:monospace; font-weight:bold;">@Html.DisplayFor(model => model.NameAllReduction)</td>
</tr>
<tr>
<td style="font-weight:bold; text-align:right;">Consonants</td>
<td style="font-family:monospace; font-weight:bold; width:215pt;">@Html.DisplayFor(model => model.Consonants)</td>
<td style="font-family:monospace; font-weight:bold;">@Html.DisplayFor(model => model.ConsonantReduction)</td>
</tr>
</span>
</table>
-->
例 1 * *
テーブルの外側:
1 5 59 59
アルバート・アインシュタイン
32 92 512 5
例2 **
テーブルの内部:
母音 1 5 59 59 34/7
氏名 アルバート・アインシュタイン 63/9
子音 32 92 512 5 29/11
プロジェクトの実行中に、モデル ABIPlusPhillips.BFName、.BLName (Big Al にはミドル ネームがなく、ミドル ネームが存在しない場合にミドル ネームを絞り出すためのコードがいたるところにあります)、.Vowels および .Consonants、Iビューに渡される直前に、Quickwatch と TextVisualizer を使用してオブジェクトを調べ、オブジェクトのプロパティから重要な情報を収集しました。その情報をコピーしてテキスト エディターに貼り付け、モノスペース フォントを使用して、すべての文字を適切に縦方向に配置しました。
例 3 * ***
1 5 59 59
アルバート・アインシュタイン
32 92 512 5
最後に、テーブルをタグ ペアで囲み、同じ間隔の問題が発生しました (例 1 を参照)。ただし、テーブル内の文字はすべて赤でした。実際、例 1 のように「テーブルの外側」の周りにサム ブラケットを使用すると、例 1 と同じ結果が得られましたが、赤だけでした。
周囲の HTML が等幅に設定されているにもかかわらず、 に埋め込まれた情報が強制的に比例しているように見えます。
この問題を回避するにはどうすればよいですか?
Stack の人々とすべての貢献者に感謝します...これは素晴らしい有益なサイトです...
マーブ
I stripped things down to "barebones" as follows. The .cshtml page displays wrong, however the HTML source appears correct.
-------
.cshtml page that displays:
@model Numer.Models.ABIPlusPhillips
@Model.Vowels<br />
@Model.FullName<br />
@Model.Consonants
Site.css:
body
{
font-family:Courier New;
color:Red;
}
--------
------
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div>
<section id="main">
@RenderBody()
</section>
</div>
</body>
</html>
------
------
HTML Source from displayed page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<section id="main">
1 5 59 59 <br />
Albert Einstein<br />
32 92 512 5
</section>
</div>
</body>
</html>