1

我正在尝试创建这样的东西：

http://i.stack.imgur.com/aabn9.png

但是我有问题，因为它必须在 foreach 循环中进行。

这就是我现在拥有的方式，但它不像图像我不知道如何像我的图像那样做。

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {

              <a href="#" class="box"></a>
              <p>@(counter++)</p>

          }               
  }

CSS：

。盒子

{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    float: left;     
}

如果有人能帮助我，我将不胜感激。

4

4 回答 4

0

我不确定你是否需要这个<p>标签，但你可以把计数器放在<a>标签里面（我猜这只是盒子的索引）然后放一个 display:block; 在 .box CSS 中使标签显示为正方形。

为了澄清它，您需要以下 CSS

.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

编辑：对不起，我刚刚意识到广场下面的柜台。在这种情况下，使用 div 包装器包装标签更容易，如下所示：

<div class="wrapper">
   <a href="#" class="box"></a>
   <p>@(counter++)</p>
</div>

并给包装类一个 text-align:center，像这样：

.wrapper 
{
    text-align:center;
    float: left;
}

（所有这些都在上面的 .box 类旁边。）

我希望这有帮助。

编辑：根据sandeep 的评论，您还需要将浮动从盒子类移动到包装器。

于 2012-04-24T11:20:02.563 回答
0

我认为您的问题出在<p>段落标签中。它在每个框之后包含一个新行。

于 2012-04-24T11:20:54.020 回答
0

将两者一起包裹在一个盒子里。

像这样：

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="lefty" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }

CSS：

.lefty
{
    float: left;     
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;  
}

其余的取决于您，例如将文本居中对齐。

于 2012-04-24T11:25:03.127 回答
0

您必须像这样定义html：

HTML

<div class="wrapper">
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
</div>

CSS

.wrapper{
  text-align:center;
}

.parent{
  display:inline-block;
  *display:inline;/*For IE*/
  *zoom:1;
  text-align:center;
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

JS

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="parent" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }
于 2012-04-24T11:26:47.043 回答