html - 选项卡的标题出现在垂直 Accordion 的右侧

Question

这是怎么回事？: Accordion 正常工作，但选项卡显示在 Accordion 的右侧。

jQuery

$(document).ready(function(){
    $(".accordion .title").click(function(){
        $(this).next(".accordion .details").slideToggle(500)
    }).next().hide();
});  

---

CSS: Hoverbox

.hoverbox
{
    cursor: default;
    list-style: none;
} .hoverbox a {
    padding-top: 5px;
    cursor: default;
    text-decoration: none;
    color: black;
} .hoverbox a .preview {
    display: none;
} .hoverbox a:hover .preview {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
} .hoverbox img {
    vertical-align: top;
    height: 125px;
} .hoverbox li {
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    text-align: right;
    text-decoration: none;
} .hoverbox .preview {
    border-color: #000;
    height: 300px;
} .gallery {
    width: 100%;
}

---

HTML:一张图片的示例。

<div class="accordion">
    <div class="title"><h2></h2></div>
    <ul class="details">
    <div class="gallery">
    <ul class="hoverbox">
        <li>
        <a href="#">
            <img src="pictures/1.jpg" class="thumbnail"/>
            <img src="pictures/1.jpg" class="preview"/></br>
            Compass
        </a>
        </li>
    </ul>
    </div>
    </ul>
</div>

首先，让我们从刚刚加载的 Accordion 开始。

单击“玻璃窗”后，会发生以下情况。

我做了什么:在过去的四五天里，我花了很多时间搬家 <div>标签，确保我的代码正确并涉足 CSS(特别是确保文本没有奇怪地对齐或者图像的显示方式有问题)。不是很具体，我知道。对于这个不那么简短的问题，我深表歉意。

---

更新

我尝试使用 Dexter 的建议，但我仍然遇到文本对齐问题。

点击第 1 节后...

第 2 节...

如前所述，每个部分都应位于彼此之下。 视频 部分与 Accordion 分开，主页 是页面底部导航列表的一部分(用作页脚)。

我开始明白，对于与 Accordion 无关的所有其他内容，这可能是我的 CSS 的问题。由于我不知道问题出在哪里，我将只上传整个 CSS(与 Accordion CSS 的长度大致相同)...如果当然，那是“好的”。

Answer 1

那么，这就是您要实现的目标吗？

在这里查看 fiddle :http://jsfiddle.net/GRATx/

编辑:

fiddle 中的代码 [更新了 hoverbox 功能]:http://jsfiddle.net/GRATx/1/