javascript - 面板内的 jQuery Accordion 对齐

标签 javascript jquery html css

我在折叠式面板中放置内容时遇到问题。如果您注意到,在第 4 个面板上,第 2 个图像未与第 1 个正确对齐。它有点粘在面板的底部。

基本上,我将在每个面板中添加 4 张图像以及它们下方的文本。我只是想让它们正确对齐,但我似乎无法弄清楚如何做到这一点。

我是 CSS 和 jQuery 的新手,所以我确信这是我所缺少的相当简单的东西。如果您能给我任何帮助或帮助,我将不胜感激。感谢您的宝贵时间。

我的 JSFiddle:http://jsfiddle.net/Del087/CzE3q/988/

#accordion {
width:100%;
margin:10px auto;
border:1px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
clear: both;
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
border:1px solid white;
background-color:#ff6600;
font:bold 22px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}

#accordion .content1 {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:150px;
width:25%;
float:left;

}
#accordion h2.active {
background-color:#000000;

}

<div id="accordion">
 <h2>League Scores</h2>

<div class="content">
    <div class="content1"><a        href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt=" photo PAHL210210_zps694744b9.png"/></a>

    <br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a>

    <br><a href="http://www.pahockey.com">Squirt</div>
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/HPHL_zps31e66fcd.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/HPHL_zps31e66fcd.png" width="90" height="90" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a>
</div>
        </div>
 <h2>League Standings</h2>
 <div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt="Pittsburgh Amateur Hockey League - Pittsburgh, PA" title="Pittsburgh Amateur Hockey League - Pittsburgh, PA"/></a>

    <br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a></div>
<div class="content"></div>
 <h2>Tournament Scores</h2>

<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100"  border="0"  alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild"</a></div>
 <h2>Tournament Standings</h2>

<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild</a><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a>Niagara Sports Tournaments</a>

最佳答案

除此之外还有一个换行符 <br> ,我会将它们包装在一个容器中,这样您就可以将图像及其各自的文本放在同一个 div 中。然后要么使用 float:left在容器上或 display: inline-block

FIDDLE

关于javascript - 面板内的 jQuery Accordion 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27350545/

相关文章:

javascript - 在 javascript 循环运行时更新网页以显示进度

javascript - GMail 使用什么 API 通知浏览器选项卡收到电子邮件?

jquery - 如何排除 jQuery DataTable 中的最后一列

javascript - 如何使用 javascript 在 html 中删除和创建新的 ul li 标签

javascript - 如何检查具有相同 id 的某些按钮值 javascript

javascript - 应用css : "overflow: hidden;" 时查看文本的顶部

javascript - 遍历 N 级 child

javascript - 在 Javascript/Jquery 中传递查询字符串

jquery - 使用 phonegap 的 pagecreate 事件加载页面时出现问题

jquery - Action depend select option value selected?