gpt4 book ai didi

html -
关闭后仍然有效

转载 作者:太空宇宙 更新时间:2023-11-04 10:33:57 25 4
gpt4 key购买 nike

我正在为我的网站制作一些统计数据,这些数据在 3 个表格中。为了让它看起来漂亮,我把它们放在同一条线上。

所以我用不同的 <div> 创建了 3 个表代码看起来像这样:

@{
ViewBag.Title = "Index";
int i = 0;
int j = 0;
}

<center><h1>TimeSheet Statistics</h1></center>
@foreach (var item in ViewBag.tab)
{
if (i == 0)
{
j=j+1;
@Html.Raw(string.Format("<div id='id{0}' style='float:left; margin-right: 1%;width:31%;display: inline;'>", j));
@Html.Raw("<table style='border-collapse:collapse;'>");
@Html.Raw("<tr align='center'><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td></tr>");
}
i = i + 1;
if (item.getPackageUnitsLive() < 0)
{
@Html.Raw("<tr class='colored' style='color:red'>");
}
else
{
if (item.getPackageUnitsLive() <= 10)
{
@Html.Raw("<tr class='colored' style='color:orange'>");
}
else
{
@Html.Raw("<tr class='colored'>");
}
}
<td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/@item.getClientRef()'>@item.getClientName()</a></td>
<td align='center' style='font-size:11px'>@if(item.getPackageUnitsLive()>=0){@item.getPackageUnitsLive()@Html.Raw("/")@item.getPackageTypePackage(); }else{ Html.Raw("&nbsp;");}</td>
<td align='center' style='font-size:11px'>@if(item.getPercentLive()>=0){@item.getPercentLive()@Html.Raw("%")}else{ Html.Raw("&nbsp;");}</td>
<td align='center' style='font-size:11px'>@if(item.getNbrInterventionsUnits() > 0){@item.getNbrInterventionsUnits()}else{ Html.Raw("&nbsp;");}</td>
<td align='center' style='font-size:11px'>@if(item.getNbrInterventionsUnitsMonth() > 0){@item.getNbrInterventionsUnitsMonth()}else{ Html.Raw("&nbsp;");}</td>
@Html.Raw("</tr>")
if (i > ViewBag.nbClients / 3)
{
i = 0;
@Html.Raw("</table>")
@Html.Raw("</div>")
}
}
@Html.Raw("</table>")@Html.Raw("</div>")

我有我想要的三个表格,但问题是当我启动代码时,即使我关闭了最后一个 <div>,我的页脚也会出现在最后一个表格中...

我做错了什么?

提前致谢!

编辑:有输出:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeSheet</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/themes/base/core.css"
rel="stylesheet" type="text/css" />
<link href="/Scripts/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/theme.css"
rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">TimeSheet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Customers">Liste Clients</a></li>
<li><a href="/Interventions/techByDay">Int. Tech/Day</a></li>
<li><a href="/Statistiques">Statistiques</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/SignIn" id="loginLink">Sign in</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<center><h1>TimeSheet Statistics</h1></center>
<div id='id1' style='float:left; margin-right: 1%;width:31%;display: inline;'><table style='border-collapse:collapse;'><tr align='center'><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td></tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/ANT'>Antoine et Fils</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'>30</td>
<td align='center' style='font-size:11px'>30</td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/CHA'>Chalet de la Foret</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/CHR'>Christian &amp; Cie</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/DAM'>Damien CORP</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/FAB'>Fabian.Oli</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr></table></div><div id='id2' style='float:left; margin-right: 1%;width:31%;display: inline;'><table style='border-collapse:collapse;'><tr align='center'><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td></tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/GUI'>Guillaume </a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'>2</td>
<td align='center' style='font-size:11px'>2</td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/JOS'>Joseph industries</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/NIC'>Nicolas.leo</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored' style='color:red'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/PIE'>Pierre Group</a></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/TST0'>TST0</a></td>
<td align='center' style='font-size:11px'>30/30</td>
<td align='center' style='font-size:11px'>100%</td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr></table></div><div id='id3' style='float:left; margin-right: 1%;width:31%;display: inline;'><table style='border-collapse:collapse;'><tr align='center'><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td><td style='border:1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td></tr><tr class='colored'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/TST1'>TST1</a></td>
<td align='center' style='font-size:11px'>30/30</td>
<td align='center' style='font-size:11px'>100%</td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr><tr class='colored'> <td><a align='center' style='font-size:11px' class='tdColored' href='/Customers/Details/XXX4'>XXX4</a></td>
<td align='center' style='font-size:11px'>30/30</td>
<td align='center' style='font-size:11px'>100%</td>
<td align='center' style='font-size:11px'></td>
<td align='center' style='font-size:11px'></td>
</tr></table></div>
<hr />
<footer>
<p>&copy; 2016 - TimeSheet</p>
</footer>
</div>
<script src="/Scripts/jquery-2.2.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>

编辑:这是它的样子,左边的页脚

Footer is on the left...

最佳答案

问题在于 div #id1#id2#id3 具有 float:left。这是一个众所周知的问题。您可以阅读更多相关信息 here .

简而言之:你需要用div这样的容器把它们包裹起来清除 float ,让它清晰起来。

在这个演示中,我用类为 .clearfix 的 div 包装了它们.

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<!DOCTYPE html>


<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeSheet</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />

<script src="/Scripts/modernizr-2.6.2.js"></script>

<link href="/Content/themes/base/core.css"
rel="stylesheet" type="text/css" />
<link href="/Scripts/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/theme.css"
rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">TimeSheet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Customers">Liste Clients</a></li>
<li><a href="/Interventions/techByDay">Int. Tech/Day</a></li>
<li><a href="/Statistiques">Statistiques</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/SignIn" id="loginLink">Sign in</a></li>
</ul>

</div>
</div>
</div>
<div class="container body-content">


<div class="clearfix">
<center><h1>TimeSheet Statistics</h1></center>
<div id='id1' style='float: left; margin-right: 1%; width: 31%; display: inline;'>
<table style='border-collapse: collapse;'>
<tr align='center'>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/ANT'>Antoine et Fils</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'>30</td>
<td align='center' style='font-size: 11px'>30</td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/CHA'>Chalet de la Foret</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/CHR'>Christian &amp; Cie</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/DAM'>Damien CORP</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/FAB'>Fabian.Oli</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
</table>
</div>
<div id='id2' style='float: left; margin-right: 1%; width: 31%; display: inline;'>
<table style='border-collapse: collapse;'>
<tr align='center'>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/GUI'>Guillaume </a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'>2</td>
<td align='center' style='font-size: 11px'>2</td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/JOS'>Joseph industries</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/NIC'>Nicolas.leo</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored' style='color: red'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/PIE'>Pierre Group</a></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/TST0'>TST0</a></td>
<td align='center' style='font-size: 11px'>30/30</td>
<td align='center' style='font-size: 11px'>100%</td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
</table>
</div>
<div id='id3' style='float: left; margin-right: 1%; width: 31%; display: inline;'>
<table style='border-collapse: collapse;'>
<tr align='center'>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/'>Client Name</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/u'>Units Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/p'>% Live</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/i'>Tot.Inter.</a></td>
<td style='border: 1px solid #728a8e'><a class='upsize' href='/Statistiques/Index/m'>Month Inter.</a></td>
</tr>
<tr class='colored'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/TST1'>TST1</a></td>
<td align='center' style='font-size: 11px'>30/30</td>
<td align='center' style='font-size: 11px'>100%</td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
<tr class='colored'>
<td><a align='center' style='font-size: 11px' class='tdColored' href='/Customers/Details/XXX4'>XXX4</a></td>
<td align='center' style='font-size: 11px'>30/30</td>
<td align='center' style='font-size: 11px'>100%</td>
<td align='center' style='font-size: 11px'></td>
<td align='center' style='font-size: 11px'></td>
</tr>
</table>
</div>
</div>

<hr />
<footer>
<p>&copy; 2016 - TimeSheet</p>
</footer>
</div>

<script src="/Scripts/jquery-2.2.1.js"></script>

<script src="/Scripts/jquery-ui-1.11.4.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>

http://jsbin.com/joxewu/edit?html,css,output

关于html - <div> 关闭后仍然有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36313046/

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