Inline-Block scheint nicht zu funktionieren

Ich versuche, ein einfaches Block-Layout auf meiner Seite anzuzeigen. Nur ein paar Kisten, nichts Besonderes. Dies ist mein Code:Inline-Block scheint nicht zu funktionieren

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

Und das ist mein CSS:

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

ich wirklich keine Ahnung, was das Problem ist. Ich füge einen Screenshot des Ergebnisses hinzu.

Ich habe noch nie ein Inline-Block-Layout verwendet, also ist es vielleicht etwas Einfaches. Dieser Code ist von W3C, gerade Kopie Paste, so sollte es richtig funktionieren?

BEARBEITEN: So sollte es aussehen: https://jsfiddle.net/fha4oftm/ EDIT_2: Ich habe festgestellt, dass bei der Überprüfung meiner Seite im Browser, Floating-Box existiert nicht in meiner .css-Datei. Das ist seltsam, da es in der CSS-Datei in meinem Projekt existiert.

Quelle

2016-04-24 Kevin Strijbos

Scheint wie CSS überhaupt nicht verwiesen wird. Könnten Sie die HTML-Quelldemo bei Plunker erstellen, um das Problem anzuzeigen? – navigator

Siehe [this fiddle] (https://jsfiddle.net/fha4oftm/) für was es sein wird, wenn die css angewendet wird –

Kann ich MVC-Demos bei Plunker erstellen? Auf das Stylesheet wird in meiner _layout.cshtml-Seite verwiesen. –

Versuchen das Hinzufügen der folgenden an die Spitze Ihrer Ansicht ...

 <link rel="stylesheet" href="~/path/yourcssfile.css" />

Quelle

2016-04-24 10:49:32

Inline-Block scheint nicht zu funktionieren

Antwort

Verwandte Themen