Список стилей div'ов в виде 2 колонок с CSS

Question

Я пробую ASP.NET MVC 2, пройдя учебник «NerdDinner».Но очевидно, что версия 2 MVC не создает страницу «Подробности» так же, как в учебном пособии, и вы получаете элементы div с классами CSS для стилизации.Тем не менее, я хочу получить стиль, в котором за каждой меткой следуют в одной строке с полем, и я не могу этого сделать, я получаю их поверх друг друга, или, если я пытаюсь использовать поплавки, странные вещи случаютсяЯ не знаю точно, как использовать это в этой ситуации, где каждый другой div должен быть на одной линии).Вот сгенерированный html для страницы «Подробности»:

<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>

Как получить, чтобы метки отображения и поля отображения для каждой «записи» отображались в одной строке?

Answer 1

.display-label{
  float:left;
  clear:left;
  width:250px;
}

.display-field{
  float:left;
  clear:right;
}

Это сработало для меня без изменений в разметке HTML, но YMMV ...

Указание ширины поля метки, как предложено Андерсом, помогает им выстроиться в линию.

Answer 2

То же, что и ответ @ Салила, но вместо использования <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">Title</div>
    <div class="display-field"><%: Model.Title %></div>
</div>

Кроме того, не забудьте <div style="clear:both"/> в конце, чтобы сбросить выравнивание.

Answer 3

Попробуйте

.display-label{
  float:left;

}
.display-field{
  float:left;
}

И

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