2016-04-24 3 views
0

Я пытаюсь отобразить простой макет блока на моей странице. Всего несколько коробок, ничего необычного. Это мой код:Inline-block не работает

@section Content{ 

@model IEnumerable<webapp_stufv.Models.Article> 

<h2>@ViewBag.Title</h2> 

    @foreach (var item in Model) { 
     <div class="floating-box"> 
      <h4> 
       @Html.DisplayFor(modelItem => item.Title) 
      </h4> 
      <p> 
       @Html.ActionLink(@item.Content.Substring (0, 100), "Details", "News", new { id = item.Id }, null) 
      </p> 
     </div> 
    } 
} 

И это мой CSS:

.floating-box { 
    display: inline-block; 
    width: 150px; 
    height: 75px; 
    margin: 10px; 
    border: 3px solid #73AD21; 
} 

Я действительно понятия не имею, в чем проблема. Я добавлю скриншот результата. Screenshot

Я раньше не использовал компоновку встроенного блока, поэтому, возможно, это просто. Этот код от W3C, прямо скопируйте пасту, чтобы он работал правильно?

EDIT: Это должно выглядеть так: https://jsfiddle.net/fha4oftm/ EDIT_2: Я заметил, что при проверке моей страницы в браузере в моем .css-файле не существует плавающего ящика. Это странно, поскольку он существует в файле css в моем проекте.

+0

Похоже, ваш CSS это не ссылается на всех. Не могли бы вы создать демо-версию HTML в Plunker, чтобы отобразить проблему? – navigator

+0

Обратитесь к [этой скрипке] (https://jsfiddle.net/fha4oftm/) за то, что будет, если будет применен css –

+0

Могу ли я создать демоверсию MVC в плункере? Таблицу стилей ссылается на моей странице _layout.cshtml. –

ответ

1

Попробуйте добавить следующее в верхней части вашей точки зрения ...

 <link rel="stylesheet" href="~/path/yourcssfile.css" /> 
Смежные вопросы