Accordian菜单（单击时）会影响图像在下一个表格单元格中的位置
[英]Accordian menu (when clicked) affects position of an image in the next table cell
问题描述
I'm using an accordion menu I found on a CSS resource page. 
我正在使用在CSS资源页面上找到的手风琴菜单。
The menu works fine - the only problem is: 菜单工作正常-唯一的问题是：
I have an image that's right next to the menu (the image and the accordion menu are in their own separate table cell), and whenever the accordion menu is clicked, the image will shift downwards along with the accordion effect. 我在菜单旁边有一个图像（图像和手风琴菜单位于其各自的表格单元格中），每当单击手风琴菜单时，图像都会随着手风琴效果而向下移动。
I basically need the image to stay where it is (valign middle) and not move around whenever the accordion menu is clicked. 我基本上需要图像保持在原处（中间居中），并且每当单击手风琴菜单时都不要四处移动。
I have very bare basic knowledge of HTML and this is issue is driving me nuts :( 我对HTML几乎没有基础知识，这个问题使我很生气:(
Hope someone can help me out - thank you in advance! 希望有人可以帮助我-预先感谢您！
This is the CSS: 这是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;
}
This is the HTML: 这是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"> </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"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
Are there any other info that you need? 您还需要其他信息吗？
1 个解决方案
解决方案1
0 2014-03-11 13:50:51
As you are saying that image is valign="middle", so it's working fine B'coz whenever menu expands table height also increases with menu and image is adjusting itself in the middle. 正如您所说的图像是valign =“ middle”，所以只要菜单扩展表的高度也随着菜单的增加而B'coz正常工作，并且图像在中间进行调整。
but you can try valign="top" in "td" which is holding the image table . 但是您可以尝试在保存图像表的“ td”中尝试使用valign="top" 。 like below 像下面
<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>
if it is not necessary to make it valign="middle" you can use it... 如果不需要使其变为valign =“ middle”，则可以使用它...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.