gpt4 book ai didi

c# - Css 每行显示 3 个 foreach 结果

转载 作者:太空宇宙 更新时间:2023-11-04 16:19:30 24 4
gpt4 key购买 nike

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

它的作用是逐行显示输出行,当 Dabase.DB 更改时,它会写入并重新开始。

我想要的是水平显示每行 3 个 logcontainer 的输出,如果我遇到一个新的 database.DB 打破它,写下数据库的名称并从左边开始。

我应该如何修改代码才能做到?

最佳答案

只需让您的.logcontainer 向左浮动,每显示3 次,清除 float 。

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 的父容器宽度小于 1500 像素,您最终会得到一行 2 列,然后是一行 1 列。

关于c# - Css 每行显示 3 个 foreach 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6859450/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com