<div>关闭后仍然有效
我为我的网站制作了一些统计数据，这些数据在3个表格中。 为了让它看起来漂亮，我把它们放在同一条线上。
所以我创建了3个不同<div>的表格，代码如下：
@{
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(" ");}</td>
<td align='center' style='font-size:11px'>@if(item.getPercentLive()>=0){@item.getPercentLive()@Html.Raw("%")}else{ Html.Raw(" ");}</td>
<td align='center' style='font-size:11px'>@if(item.getNbrInterventionsUnits() > 0){@item.getNbrInterventionsUnits()}else{ Html.Raw(" ");}</td>
<td align='center' style='font-size:11px'>@if(item.getNbrInterventionsUnitsMonth() > 0){@item.getNbrInterventionsUnitsMonth()}else{ Html.Raw(" ");}</td>
@Html.Raw("</tr>")
if (i > ViewBag.nbClients / 3)
{
i = 0;
@Html.Raw("</table>")
@Html.Raw("</div>")
}
}
@Html.Raw("</table>")@Html.Raw("</div>")
我有三张表，就像我想要的那样，问题是当我启动代码时，即使我关闭了最后一个<div>，我的页脚也会进入最后一个表...
我做错了什么？
提前致谢！
编辑：有输出：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!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 & 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>© 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>
编辑：这就是它的样子，左边的页脚
1 个答案:
答案 0 :(得分：1)
问题是div #id1，#id2和#id3有float:left。这是一个众所周知的问题。您可以阅读更多相关信息here。
简而言之：您需要通过使用div等容器包装它们来清除浮动并清除它。
在这个演示中，我用div .clearfix包装它们。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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 & 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>© 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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？