我在将四个div框彼此对齐时遇到一些麻烦，或者更准确地说，我将两个“头”框对齐，但我的问题是我将它们用作展开折叠容器那些盒子会在第2行的其他可扩展盒子上造成损坏！因此，当您展开“头1”框时，“头部4”框将向右浮动！
我想要框“头4”和框“头3”下降而不是在展开框1或2时左右浮动
伙计们问我这样做是为了让他们更容易看到最新情况 我完全对不起，请注意下次减少代码，这里 盒子在运行 Demo
您只需尝试展开每个框即可查看框 问题会很明显
这是我的代码我有问题作为参考：
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = `document.getElementById(tbid).style.display == "table" ? "none" : "table";}`
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong> </font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</body>
</html>
答案 0 :(得分：0)
你应该看一下jQuery accordeon。这对你来说简单得多。并会让你的HTML更清洁。另请查看jQuery library，它会简化您的JavaScript生活。 此外，你应该将样式放在css样式表中，这样你的css就会更加"DRY"。
否则，您可以按照以下步骤进行修复：
float:left的div中将您的桌子两两分组。float : left，然后调整边距。<div style="clear : both;" />。Here is the fiddle showing the behavior
源代码：
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<div style="float : left">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<div style="clear : both"></div>
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
<div style="float: left; margin-left:50px;">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<div style="clear: both"></div>
<table width="300px" border="0" style="float:left" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
</body>
</html>