0

我在对齐四个 div 框彼此相邻时遇到了一些问题，或者更准确地说，我已经将我的两个“头”框彼此对齐，但我的问题是我将它们用作展开折叠容器和那些框将损坏第 2 行的其他可扩展框！因此，当您展开框“head 1”时，框“head 4”将向右浮动！

当您展开框 1 或 2 时，我希望框“head 4”和框“head 3”向下而不是左右浮动

伙计们也让我运行这个，以便他们更容易看到发生了什么，我很抱歉下次知道要减少代码，这是运行 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>
4

1 回答 1

0

你应该看看那个jQuery 手风琴。这对你来说会简单得多。并且会让你的 html 更干净。还可以看看jQuery library，它会大大简化你使用 JavaScript 的生活。此外，您应该将样式放在 css 样式表中，这样您的 css 会更加"DRY"。

否则，您可以按照以下步骤进行修复：

  1. 将您的表格两两分组在一个 div 中float:left。
  2. 制作所有表格float : left，然后调整边距。
  3. <div style="clear : both;" />在每个 div 的第一个和第二个表之间插​​入 a 。

这是显示行为的小提琴

和源代码：

    <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>
于 2013-02-15T22:21:28.140 回答