面板中的jQuery手风琴对齐

Question

I'm having trouble with the placement of the contents within the accordion panels. If you notice, on the 4th panel, the 2nd image is not aligned correctly with the 1st. It's kind of stuck to the bottom of the panel.

Essentially, I will be adding 4 images in to each panel along with text below them. I'm just trying to get them to align correctly and I can't seem to figure out hot to do this.

I am new to CSS and jQuery so, I'm sure it's something fairly simple that I am missing. I would appreciate any help or assistance you may be able to give me. Thanks for your time.

My 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

Besides the fact that you had a linebreak in there <br> , I would wrap them in a container so that you can have the image and its respective text in the same div and then either use float:left on the container or display: inline-block

FIDDLE