[英]Inline-block doesn't seem to work
I'm trying to display a simple block layout on my page. 我正在尝试在页面上显示一个简单的块布局。 Just a couple of boxes, nothing fancy.
只是几个盒子,没什么好看的。 This is my code:
这是我的代码:
@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>
}
}
And this is my css: 这是我的CSS:
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
I really have no idea what's the problem. 我真的不知道出了什么问题。 I'll add a screenshot of the result.
我将添加结果的屏幕截图。
I've never used an inline-block layout before, so maybe it's something simple. 我以前从未使用过内联块布局,所以也许这很简单。 This code is from W3C, straight up copy paste, so it should work right?
该代码来自W3C,直接复制粘贴,因此应该可以正常工作吗?
EDIT: This is what it should look like: https://jsfiddle.net/fha4oftm/ EDIT_2: I've noticed upon inspecting my page in the browser, floating-box does not exist in my .css file. 编辑:这应该是这样: https: //jsfiddle.net/fha4oftm/编辑_2:在浏览器中检查我的页面时,我注意到,.css文件中不存在浮动框。 This is strange since it DOES exist in the css file in my project.
这很奇怪,因为它确实存在于我项目的css文件中。
尝试将以下内容添加到视图顶部...
<link rel="stylesheet" href="~/path/yourcssfile.css" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.