jQuery手风琴图像并排

Question

我有些擅长写html，但是CSS和JS使我感到困惑。 我正在尝试学习，希望你们中的一位大师能帮助我。 我试图在我的JQuery手风琴的每个面板中放置多个图像。 到目前为止，我已经在第一个面板中插入了两个图像，它们是“堆叠”的，而不是并排出现。 理想情况下，我希望每个面板中有4个并排图像。 以下是我正在使用的JSFiddle的链接。

再说一遍，我对这些东西有点不满意，因此，请尽量具体说明您的回答。

在同一个项目中，我想知道是否有一种方法可以将图标添加到页眉栏中。 最后，寻找一种在装载时将面板全部关闭的方法。 照原样，该页面在第一个面板打开的情况下加载。

任何帮助将不胜感激，并感谢您的时间。

小提琴http://jsfiddle.net/Del087/CzE3q/981/

#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 {
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
background-color:#ff6600;
font:bold 16px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:150px;
}
#accordion h2.active {
background-color:#000000;
}`

<div id="accordion">
 <h2>League Scores</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=" photo PAHL210210_zps694744b9.png"/></a>
    <br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a>
    <br>Squirt</div>


        <div><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="100" height="100" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a></div>
 <h2>League Standings</h2>

<div class="content">....</div>
 <h2>Tournament Scores</h2>

<div class="content">....</div>
 <h2>Tournament Standings</h2>

<div class="content">....</div>

Answer 1

请如下更改您的CSS

#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;
    background-color:#ff6600;
    font:bold 16px Petua One;
    color:#ffffff;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content {
    background-color:#ffffff;
    padding:10px 15px;
    color:black;
    height:150px;
    width:50%;
    float:left;
}
#accordion h2.active {
    background-color:#000000;
}

在这里，我为content div指定了50％的宽度并将其浮动。为清除手风琴的浮动，我在#accordion h2添加了clear:both和

检查这个小提琴