jQuery面板内的手风琴对齐

Question

我在手风琴面板内部放置内容时遇到了问题。如果您注意到，在第四个面板上，第二张图像与第一张图像没有正确对齐。它有点卡在面板的底部。

本质上，我将在每个面板中添加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> 

Answer 1

除了这个事实，你在那里<br>有断行，我想将它们包装在一个容器中，这样就可以有图像和其相应的文字相同div，然后或者使用容器上float:left或display: inline-block

FIDDLE