MVC 2 视图布局 CSS 控件布局
我对开发新的 MVC2 Web 应用程序所做的很多事情都很陌生，所以这是一个初学者问题。
我需要了解网页上的控制和内容布局选项。我正在使用 MVC2，因此我使用控制器、视图、ViewModel 和视图模板。 我需要快速启动的是控制任何特定视图上控件和内容的精细布局。
下面我粘贴了两个自动生成的模板示例来说明我的挑战。我看到布局是由 Site.css 文档中的 CSS 控制的。在第一个示例中，我得到了 DisplayLabel 和 DisplayField 的顺序流。我更喜欢将 DisplayLabel 的相邻布局与示例 2 中生成的 DisplayField 放在同一行。但是，示例 2 太简单了，因为格式设置应用于标签和字段。
我认为解决这一学习曲线的正确方法是 Microsoft Expression，但我目前没有个人资源来解决 Expression。
谁能给我指点一个资源，让我接触到大量 CSS 格式示例？我有很多语法问题。例如，我相信正在引用 Site.css，但我在 Site.css 中找不到“显示标签”部分。
实施例1
<fieldset>
<legend>Fields</legend>
<div class="display-label">DocTitle</div>
<div class="display-field"><%: Model.DocTitle %></div>
<div class="display-label">DocoumentPropertiesID</div>
<div class="display-field"><%: Model.DocumentPropertiesID %></div>
实施例2
<h2>Title: <%: Model.DocTitle %></h2>
<h2>Created: <%: Model.Created %></h2>
<h2>Modified: <%: Model.Modified %></h2>
<h2>Author: <%: Model.tbl_Author.Name %></h2>
<h2>Genre: <%: Model.tbl_DocumentGenre.GenreName %></h2>
I'm new to a lot of what I'm trying to do with the development of a new MVC2 web application so this is a beginner question.
I need to understand my options for control and content layout on a web page. I’m using MVC2 so I’m using Controllers, Views, ViewModels, and View Templates.
What I need to spin up on…fast…is control the granular layout of controls and content on any particular view.
Below I’ve pasted two examples of auto generated templates that illustrate my challenge. I see that layout is controlled by CSS in my Site.css document. In the first example I get a sequential flow of DisplayLabel and DisplayField. I prefer the adjacent layout of DisplayLabel on the same line as DisplayField produced from example 2. However, example 2 is too simple because the formatting is applied to the Label and the Field.
I think the correct way to tackle this learning curve is Microsoft Expression but I don’t have personal bandwidth at the moment to tackle Expression.
Can anyone point me to a resource that will expose me to lots of examples for CSS formatting? I have lots of syntax questions. For instance, I believe is referencing the Site.css but I can’t find a "display-label" section in Site.css.
Example 1
<fieldset>
<legend>Fields</legend>
<div class="display-label">DocTitle</div>
<div class="display-field"><%: Model.DocTitle %></div>
<div class="display-label">DocoumentPropertiesID</div>
<div class="display-field"><%: Model.DocumentPropertiesID %></div>
Example 2
<h2>Title: <%: Model.DocTitle %></h2>
<h2>Created: <%: Model.Created %></h2>
<h2>Modified: <%: Model.Modified %></h2>
<h2>Author: <%: Model.tbl_Author.Name %></h2>
<h2>Genre: <%: Model.tbl_DocumentGenre.GenreName %></h2>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您发布的示例使用两种不同的 HTML 元素进行结构，并且这些示例中内容的显示方式有所不同。第一个示例使用
标签来显示属性名称，使用另一个标签来显示值。您可以像这样在同一行中显示它：就像第二个示例一样。属性名称及其值都位于同一标记中。
标签用于显示标题。如果您获得类似的布局，CSS 可能有一些在 div 中显示更大文本的规则。如果您找不到这些类的规则，请查找 div 的规则。注意：直接在 div 等块元素中显示内容并不是一个好主意。您可以将它们放在 span 标签中。
这里有一些关于 HTML 和 CSS 的资源：
XHTML
教程
The examples you posted uses two different HTML elements for structure and the way the content is displayed is different in these examples. First example uses a
<div>tag for displaying property name and another one for displaying the value. You can show it in the same line like this:It's just like the 2nd example. Both the property name and its value is in the same tag.
<h2>tag is used for displaying headings. If you get similar layout, CSS may have some rules for displaying texts larger in div. If you can't find rules for those classes, look up rules for div.Note: It's not a good idea to display content directly in block elements like div. You could place them in a span tag.
Here's a few resources for HTML and CSS:
XHTML
tutorials
看起来您想要类似的内容
当然，您需要调整
display-field和display-label的 CSS。如果他们有的话，您需要删除他们的block定义。此外，如果您没有足够的时间进行最初的 CSS 学习步骤，您可能必须务实并使用
来简化布局调整。顺便说一句，ASP.NET MVC 应用程序的现有 Site.css 确实包含 .display-label 定义。请仔细检查。如果您没有，那么......只是不会应用相应的格式（库存显示标签是灰色文本 IIRC）。
It looks like you want something like along these lines
Of course, you'll need to tune the CSS for
display-fieldanddisplay-label. You'll want to remove theirblockdefinition if they have one.In addition, if you don't have time enaugh to take the initial CSS learning step, you may have to be pragmatic and fallback on a
<table>in order to simplify the layout tuning.BTW, the stock Site.css of an ASP.NET MVC app does contain a .display-label definition. Please double-check. If you don't have one, then... simply the corresponding formatting will not be applied (stock display-label is gray text IIRC).