C# Css每行显示3个foreach结果

我有以下asp.net代码：

 @foreach( var database in Model)
 {

        if (!(firstTime == database.DB))
        {
          <h3> @database.DB </h3>
        }

           <div class="logContainer" onclick="location.href='/logs/Details?databaseID=@database.DB&exceptionName=@database.Exception&exceptionsOccurred=@database.Count';">
                <div class="counter"><b>@database.Count</b></div> 
                <div class="exceptionName"> Exceptions of Type: @database.Exception</div>
                <div class="date">Siste: @database.LastOccurred</div>
         <hr />   </div>


     firstTime = database.DB; 
}

它所做的是每行显示输出行，当Dabase.DB更改时，它会写入输出行并重新启动

我想要的是水平显示输出，每行有3个logcontainer，如果我遇到一个新的database.DB，请将其断开，写下数据库的名称并从左侧开始

---

我应该如何修改代码才能做到这一点？

只需将您的

.logcontainer

浮动到左侧，每显示3次，清除浮动

currentCol = 0
@foreach( var database in Model)
{

    if (!(firstTime == database.DB))
    {
      <h3> @database.DB </h3>
      currentCol = 0
    }

        <div class="logContainer" onclick="location.href='/logs/Details?databaseID=@database.DB&exceptionName=@database.Exception&exceptionsOccurred=@database.Count';">
            <div class="counter"><b>@database.Count</b></div> 
            <div class="exceptionName"> Exceptions of Type: @database.Exception</div>
            <div class="date">Siste: @database.LastOccurred</div>
        </div>

    currentCol += 1;
    if (currentCol = 2) { //3 columns were displayed, switch row
        currentCol = 0;
        <br style="clear:both" />
    }

    firstTime = database.DB; 
}

---

注意：如果.logContainer的父容器的宽度小于1500px，您将得到一行2列，然后是一行1列。

Tnx，它可以工作，但主div的背景会在一段时间后中断，而不是像那里有那么多日志那样下降。。。有什么建议吗？如果我把高度：5000px；在主分区上它可以工作，但我不知道我有多少圆木，高度：100%不工作。如何防止这个问题？

currentCol = 0
@foreach( var database in Model)
{

    if (!(firstTime == database.DB))
    {
      <h3> @database.DB </h3>
      currentCol = 0
    }

        <div class="logContainer" onclick="location.href='/logs/Details?databaseID=@database.DB&exceptionName=@database.Exception&exceptionsOccurred=@database.Count';">
            <div class="counter"><b>@database.Count</b></div> 
            <div class="exceptionName"> Exceptions of Type: @database.Exception</div>
            <div class="date">Siste: @database.LastOccurred</div>
        </div>

    currentCol += 1;
    if (currentCol = 2) { //3 columns were displayed, switch row
        currentCol = 0;
        <br style="clear:both" />
    }

    firstTime = database.DB; 
}

.logContainer
{
  width:500px;
  float:left;
}