Question

这是我的代码，它创建了一个年+月的列表

    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

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

Answer 1

您没有提供有关数据是静态还是动态的足够信息，它包含在哪种元素中。

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

您可以使用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从某个列表更改为其他内容。

Answer 2

我认为这是一个php foreach循环。

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

您可以对列表执行相同操作，逻辑相同。

Answer 3

我会使用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

Update Fiddle，删除子弹。

我该如何更改列表的顺序

3 个答案:

更新