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;
}

这里我已经为内容div指定了50％的宽度并将它们浮起来。为了清除手风琴中的花车，我添加了clear:both到#accordion h2

JQuery Accordion图像并排

1 个答案:

检查此fiddle