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 =＆＃34;中间＆＃34;所以它的工作正常B＆＃39;因为每当菜单扩展时，桌子的高度也随着菜单的增加而增加中间。

但您可以在＆＃34; td＆＃34;中尝试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 =＆＃34;中间＆＃34;你可以用它......

<强> http://jsfiddle.net/t8NDN/

手风琴菜单（单击时）会影响下一个表格单元格中图像的位置

1 个答案: