Accordian菜單（單擊時）會影響圖像在下一個表格單元格中的位置

Question

我正在使用在CSS資源頁面上找到的手風琴菜單。

菜單工作正常-唯一的問題是：

我在菜單旁邊有一個圖像（圖像和手風琴菜單位於其各自的表格單元格中），每當單擊手風琴菜單時，圖像都會隨着手風琴效果而向下移動。

我基本上需要圖像保持在原處（中間居中），並且每當單擊手風琴菜單時都不要四處移動。

我對HTML幾乎沒有基礎知識，這個問題使我很生氣:(

希望有人可以幫助我-預先感謝您！

這是CSS：

.container { 
    width:360px; 
    font-family:'Varela Round', Arial, Helvetica, sans-serif; 
    margin:0 auto;
    padding:0 0 20px;
}
.accordion {
    font-size:13px;
    border-radius:10px;
    width:360px;
    padding:10px;
    background:none;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;  
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block;
    font-size:13px;
    line-height:16px;
    background:#10967a;
    color:#ffffff;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
    background:#39bc86;
    color:#FFF;
}
.accordion .content {
    padding:0 10px;
    overflow:hidden;
    border:1px solid #fff; /* Make the border match the background so it fades in nicely */
    background:#FFFFFF;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}
.accordion h3 {
    color:#542437;
    padding:0;
    margin:10px 0;
}


/* Vertical */
.vertical ul li {
    overflow:hidden;
    margin:0 0 1px;
}
.vertical ul li label {
    padding:8px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}

.vertical ul li .content {
    height:0px;
    border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    height:250px;

}

這是HTML：

<body>
<table width="1010" border="0" background="images/bg.jpg">
  <tr>
    <td height="380" align="left" valign="top"><table width="1010" border="0">
      <tr>
        <td width="56">&nbsp;</td>
        <td width="320"><table width="100%" border="1">
          <tr>
            <td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
          </tr>
        </table></td>
        <td width="360" valign="top"><div class="container">
          <div class="accordion vertical">
            <ul>
              <li>
                <input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
                <label for="checkbox-1"><strong><span class="text">ADDRESSES</span></strong></label>
                <div class="content">
                  <table width="100%" border="0" cellpadding="0" cellspacing="8">
                    <tr>
                      <td valign="top" class="list">6767 S Clinton St</td>
                    </tr>
                    <tr>
                      <td valign="top" class="list">16910 E Quincy Ave</td>
                    </tr>
                    <tr>
                      <td valign="top" class="list">5010 Founders Pkwy</td>
                    </tr>
                    <tr>
                      <td valign="top" class="list">9390 W Cross Dr</td>
                    </tr>
                    <tr>
                      <td valign="top" class="list">1985 Sheridan Blvd</td>
                    </tr>
                    <tr>
                      <td valign="top" class="list">1630 E Cheyenne Mountain Blvd</td>
                    </tr>
                  </table>
                  </div>
                </li>
              <li>
                <input type="checkbox" id="checkbox-2" name="checkbox-" />
                <label for="checkbox-2"><strong><span class="text"><a href="3" target="_blank">MORE</a></span></strong></label>
                </li>
              </ul>
            </div>
        </div></td>
        <td width="350">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>

您還需要其他信息嗎？

Answer 1

正如您所說的圖像是valign =“ middle”，所以只要菜單擴展表的高度也隨着菜單的增加而B'coz正常工作，並且圖像在中間進行調整。

但是您可以嘗試在保存圖像表的“ td”中嘗試使用valign="top" 。 像下面

<td width="320" valign="top">
    <table width="100%" border="1">
       <tr>
         <td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
       </tr>
    </table>
</td>

如果不需要使其變為valign =“ middle”，則可以使用它...

http://jsfiddle.net/t8NDN/

Accordian菜單（單擊時）會影響圖像在下一個表格單元格中的位置

問題描述

1 個解決方案

解決方案1
0 2014-03-11 13:50:51

Accordian菜單（單擊時）會影響圖像在下一個表格單元格中的位置

問題描述

1 個解決方案

解決方案1 0 2014-03-11 13:50:51

解決方案1
0 2014-03-11 13:50:51