我在手风琴面板中放置内容时遇到麻烦。如果您注意到，在第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或FIDDLE关于javascript - 面板中的jQuery Accordion 对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27350545/
