0

这是我的代码创建年+月的列表

    var currentDate = DateTime.Now;
            var list = new List<ArchiveViewModel>();
            for (var startDate = currentDate; startDate >= new DateTime(2012, 8, 1); startDate = startDate.AddMonths(-1))
            {
                list.Add(new ArchiveViewModel
                {
                    Month = startDate.Month,
                    Year = startDate.Year,
                    FormattedDate = startDate.ToString("MMMM, yyyy")
                });
            }
            return PartialView("_ArchiveSidebar", list);

这是我在剃须刀中的代码

@foreach (var archive in Model)
    {
        <ul>
            <li>
                @Html.ActionLink(archive.FormattedDate, "Post", "Archive", new { year = archive.Year, month = archive.Month }, null)
            </li>
        </ul>   
}

在这种情况下，结果是这样的

    August, 2013
    July, 2013
    June, 2013
    May, 2013
    April, 2013
    March, 2013
    February, 2013
    January, 2013
    December, 2012
    November, 2012
    October, 2012
    September, 2012
    August, 2012

但我想要这样的东西

August, 2013    July, 2013
June, 2013      May, 2013
April, 2013     March, 2013
February, 2013  January, 2013
December, 2012  November, 2012
October, 2012   September, 2012
August, 2012

显然数据是静态的，应该怎么做？

4

3 回答 3

2

您没有提供足够的信息来说明数据是静态的还是动态的，它包含了什么样的元素。

我会根据我对你问题的理解来回答你。

您可以使用 List 以您想要的方式格式化数据。将所有项目放入无序列表（即UL）中，如下所示：

HTML

<div id="somelist">
<ul>
<li>August, 2013</li>
<li>July, 2013</li>
<li>June, 2013</li>
<li>May, 2013</li>
<li>April, 2013</li>
<li>March, 2013</li>
<li>February, 2013</li>
<li>January, 2013</li>
<li>December, 2012</li>
<li>November, 2012</li>
<li>October, 2012</li>
<li>September, 2012</li>
<li>August, 2012</li>
</ul>
</div>

然后，设置包装器 div 的宽度，并在每个具有固定宽度的列表项上使用 display-block，这样它就可以连续成对两个。像这样：

CSS

#somelist
{
    width:500px;
    padding:10px;
}
#somelist > ul
{
    display:inline-block;
    padding: 0;
    list-style:none;
}

#somelist > ul > li
{
    display:inline-block;
    width:200px;
    padding:2px;    
}

这是一个示例：http: //jsfiddle.net/3bwyj/1/

更新

用以下代码替换您的代码并使用我提供的 CSS：

<div id="somelist">
  <ul>
    @foreach (var archive in Model)
        {
          <li>
              @Html.ActionLink(archive.FormattedDate, "Post", "Archive", new { year = archive.Year, month = archive.Month }, null)
          </li>
        }
  </ul>   
</div>

请注意，我已经为 UL 添加了一个 DIV 包装器，并且不要忘记将 div 的 ID 从 somelist 更改为其他内容。

于 2013-08-07T17:28:23.913 回答
1

我认为这是一个phpforeach 循环。

PHPFiddle http://phpfiddle.org/main/code/3y5-ymg

html/php

<div class="wrapper">
    <?php
    foreach ($Result as $Row)
    {
        ?>
        <div class="col">
            <?php echo $Row ?>
        </div>
        <?php
    }?>
    <div style="clear:both"></div>
</div>

CSS

.wrapper {
    width: 600px; // you can set this to what you want
}
.col {
    width: 45%;
    float: left;
}

你可以对列表做同样的事情，逻辑是一样的。

于 2013-08-07T17:28:42.707 回答
1

我会使用nth-child伪类来做到这一点。

HTML：

<li>August, 2013</li>
<li>July, 2013</li>
<li>June, 2013</li>
<li>May, 2013</li>
<li>April, 2013</li>
<li>March, 2013</li>
<li>February, 2013</li>
<li>January, 2013</li>
<li>December, 2012</li>
<li>November, 2012</li>
<li>October, 2012</li>
<li>September, 2012</li>
<li>August, 2012</li>

CSS：

li:nth-child(odd) {
    display: inline-block;
    float: left;
}

检查这个JSFiddle

更新 Fiddle，删除子弹。

于 2013-08-07T17:34:04.110 回答