我正在开发一个mvc 4 web应用程序。我是一个新手（几天前才开始，所以请对我好）。
所以我设法从Repository类将数据获取到视图中。没问题。但问题是，我想使它能够水平显示这些数据，在两列中，每列中有两个块。到目前为止，数据是从上到下垂直排列的。
<div id="myID">
@foreach(var stuff in Model)
{
<article>@stuff.title</article>
}
</div>
上面的代码是我所做事情的一个简化版本。但同样，数据的显示方式与列表一样，从上到下显示，我希望数据的显示方式如下：
A B
C D
任何帮助都将不胜感激。
谢谢你
最佳答案
一种可以实现您的目标的方法（不使用讨厌的表）是使用CSS来布局您的文章。
探索此类HTML相关问题的一种更简单的方法是创建一个简单的HTML页面，其中仅包含您要查找的元素：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div#articles {
width: 450px;
border: solid 1px red; /* For debugging purposes */
}
div#articles article{
display: inline-block; /* Force the article to be displayed in a rectangular region laid out next to one another */
margin: 5px; /* Leave a little room between each article */
width: 200px; /* Limit the maximum width of the article so that only two fit side-by-side within the div */
text-align: center; /* Center the text horizontally */
vertical-align: middle; /* Center the text vertically */
border: solid 1px green; /* For debugging purposes - so you can see the region the articles live within */
}
</style>
</head>
<body>
<div id="articles">
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
</div>
</body>
</html>
文章、段落等通常按包含它们的元素（示例中的DIV）的宽度排列为流动元素。
您希望您的文章以网格状的模式布局，因此需要告诉浏览器将这些特定元素呈现为“块”。此外，您希望块在其父级中流动，以便只有两个块可以在包含DIV中并排放置。
因此，使用CSS样式可以：
一。将DIV的宽度设置为固定大小
2。设置要呈现为“内联块”样式的项目
三。设置文章的宽度，以便每行只能容纳两个
可选：
四。必要时将文章居中
5个。设置文章的边距，以便在每个文章之间留出一点空间
6。要更好地查看每个元素所在的区域，请使用简单的1px彩色边框
这种方法产生以下布局：
哦。