div的样式列表为具有css的2列布局 [英] Style list of divs as 2 column layout with css

问题描述

我通过NerdDinner教程尝试ASP.NET MVC 2。但显然版本2的MVC不创建一个细节页面与教程中相同，你得到的divs与css类上他们的风格。然而，我想得到的样式，每个标签跟在同一行上的字段，我不能做，我得到他们在彼此，或者如果我尝试使用浮动奇怪的事情发生（可能是因为我不知道如何使用它在这种情况下，其他每个div应该在同一行）。下面是详细信息页面生成的html：

 < fieldset> 
< legend>栏位< / legend> 
< div> 
< div class =display-label> DinnerID< / div> 
< div class =display-field><％：Model.DinnerID％>< / div> 
 
< div class =display-label>标题< / div> 
< div class =display-field><％：Model.Title％>< / div> 
 
< div class =display-label> EventDate< / div> 
< div class =display-field><％：String.Format（{0：g}，Model.EventDate）％>< / div& 
 
< div class =display-label>说明< / div> 
< div class =display-field><％：Model.Description％>< / div> 
 
< div class =display-label> HostedBy< / div> 
< div class =display-field><％：Model.HostedBy％>< / div> 
 
< div class =display-label> ContactPhone< / div> 
< div class =display-field><％：Model.ContactPhone％>< / div> 
 
< div class =display-label>地址< / div> 
< div class =display-field><％：Model.Address％>< / div> 
 
< div class =display-label>国家< / div> 
< div class =display-field><％：Model.Country％>< / div> 
 
< div class =display-label> Latitude< / div> 
< div class =display-field><％：String.Format（{0：F}，Model.Latitude）％>< / div> 
 
< div class =display-label>经度< / div> 
< div class =display-field><％：String.Format（{0：F}，Model.Longitude）％>< / div> 
 
< div class =display-label> IsValid< / div> 
< div class =display-field><％：Model.IsValid％>< / div> 
< / div> 
< / fieldset> 
  

如何获取每个条目的display-label和display-

解决方案

与@ Salil的答案相同，但不是使用< br / ; 你可以使用每个行周围的另一个div并手动设置边缘。它只是给你一个更多的控制。

  .itemrow 
 {
 margin-bottom：10px; 
} 
 
< div class =itemrow> 
< div class =display-label> DinnerID< / div> 
< div class =display-field><％：Model.DinnerID％>< / div> 
< / div> 
< div class =itemrow> 
< div class =display-label>标题< / div> 
< div class =display-field><％：Model.Title％>< / div> 
< / div> 
  

此外，不要忘记< div style =两个/> 以重置对齐。

I'm trying out ASP.NET MVC 2 by going through the "NerdDinner" tutorial. But apparently version 2 of MVC doesn't create a Details page the same as in the tutorial, and you get divs with css classes on them to style. However, I want to get the style where each label is followed on the same line with the field, and I can't do it, I get them on top of each other, or if I try using floats weird things happen (probably because I don't know exactly how to use it in this situation, where every other div should be on the same line). Here's the generated html for the Details page:

<fieldset>
        <legend>Fields</legend>
        <div>
        <div class="display-label">DinnerID</div>
        <div class="display-field"><%: Model.DinnerID %></div>

        <div class="display-label">Title</div>
        <div class="display-field"><%: Model.Title %></div>

        <div class="display-label">EventDate</div>
        <div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div>

        <div class="display-label">Description</div>
        <div class="display-field"><%: Model.Description %></div>

        <div class="display-label">HostedBy</div>
        <div class="display-field"><%: Model.HostedBy %></div>

        <div class="display-label">ContactPhone</div>
        <div class="display-field"><%: Model.ContactPhone %></div>

        <div class="display-label">Address</div>
        <div class="display-field"><%: Model.Address %></div>

        <div class="display-label">Country</div>
        <div class="display-field"><%: Model.Country %></div>

        <div class="display-label">Latitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div>

        <div class="display-label">Longitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div>

        <div class="display-label">IsValid</div>
        <div class="display-field"><%: Model.IsValid %></div>
        </div>
    </fieldset>

How do I get the display-label and display-field for each "entry" to appear on the same line?

解决方案

Same as @Salil's answer, but instead of using a <br/> you can use another div around each "row" and set the margin manually. It just gives you a litte more control.

.itemrow
{
    margin-bottom: 10px;
}

<div class="itemrow">
    <div class="display-label">DinnerID</div>
    <div class="display-field"><%: Model.DinnerID %></div>
</div>
<div class="itemrow">
    <div class="display-label">Title</div>
    <div class="display-field"><%: Model.Title %></div>
</div>

Also, don't forget a <div style="clear:both"/> at the end to reset the alignment.

这篇关于div的样式列表为具有css的2列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！