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