CSS Div 在表格中的定位
我尝试了各种组合，但似乎没有任何效果。
我有一张包含三个单元格的表格。每个单元格包含一个具有设定宽度的 div。左边的块往往垂直延伸很长，但现在我需要中心和右边的 div 块也延伸到桌子的长度。 （不幸的是，我无法删除该表，因为它已设置到我正在使用的系统代码中）。
我对布局进行了简单的重新设计。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>layout test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#contentBlock {
height: 100%;
overflow: auto;
}
#contentBlock .leftBlock {
background-color: red;
width: 200px;
}
#contentBlock .rightBlock {
background-color: red;
width: 200px;
}
#contentBlock .centerBlock {
background-color: red;
width: 580px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" style="background-color: #e2e2e2;">
<div id="contentBlock">
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top"><div class="leftBlock">
<p>left block</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
</div></td>
<td width="580" valign="top"><div class="centerBlock">
<p>centerBlock</p>
<p>dfg</p>
</div></td>
<td width="200" valign="top"><div class="rightBlock">
<p>rightBl</p>
<p>ock</p>
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
I have tried all sorts of combinations, but nothing seems to work.
I have a table with three cells. Each cell contains a div with a set width. The left block tends to run vertically very long, but now I need the center and right div blocks to also stretch to the length of the table. (Unfortunately I can't remove the table, since it is set into the code of system I am using).
I have made a simple recreation of the layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>layout test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#contentBlock {
height: 100%;
overflow: auto;
}
#contentBlock .leftBlock {
background-color: red;
width: 200px;
}
#contentBlock .rightBlock {
background-color: red;
width: 200px;
}
#contentBlock .centerBlock {
background-color: red;
width: 580px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" style="background-color: #e2e2e2;">
<div id="contentBlock">
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top"><div class="leftBlock">
<p>left block</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
</div></td>
<td width="580" valign="top"><div class="centerBlock">
<p>centerBlock</p>
<p>dfg</p>
</div></td>
<td width="200" valign="top"><div class="rightBlock">
<p>rightBl</p>
<p>ock</p>
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不能将
background-color移动到td's而不是 div 吗？Can't you just move the
background-colorto thetd'sinstead of the div?我认为你能做到这一点的唯一方法是使用 javascript。除了使用 height/min-height 属性之外，CSS 不提供扩展垂直高度的方法。
I think the only way you can do this is with javascript. CSS does not offer a way to extend vertical heights other than using the height/min-height properties.