Css每行显示3个结果

Css display 3 foreach results per row

本文关键字：3个 结果 显示 Css      更新时间：2023-09-26

我有这个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; 
}

和这个CSS:

.logContainer
{
 width:500px;
}
.logContainer:hover 
{
cursor:pointer;
background-color:#ffffcc;
}

.counter {
height: 30px;
width:35px;
float:left;
background: none repeat scroll 0 0 #E6FFDC;
border: 1px solid #BBDD66;
text-align:center;
vertical-align:middle; 
line-height:1.5em;
font-size:1.5em;
}
.exceptionName
{
width:200px;
display:inline;
padding-left: 10px;
display: inline;
}
.date
{
font-size: 0.9em;
color:gray;
width:200px;
padding-left: 47px; 
}

它所做的是显示每一行的输出行，当database . 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; 
}
CSS: 
.logContainer
{
  width:500px;
  float:left;
}

注意:如果父容器的。logcontainer小于1500px宽，你将结束一行2列后面一行1列

相关文章：