1

我已将 [Roundabout][1] 加载到 Wordpress 安装中。目标是拥有它，这样我就可以像旋转木马一样翻阅帖子。从功能上讲，一切都很顺利。然而，我在定位方面遇到了一些真正的麻烦。

Roundabout 似乎将 position:absolute 应用于子元素，以使其在轮播中定位它们的工作更容易。这一切都很好，除了我遇到了绝对定位的经典问题，将元素从页面流中拉出来，最后我的主体高度很短，元素漂浮在它上面和外面。

我已经尝试在父链上设置几个层来定位：相对无济于事。老实说，我没有想法。

我在本地工作，否则我会提供一个实时示例的链接。如果归结为需要它，我会将项目移动到一个实时示例中。

感谢大家

我的回旋处代码：

$(document).ready(function() {
                $('#main').roundabout({
                    childSelector:".post",
                    enableDrag: true,
                    autoplay: false,
                    duration: 1000,
                    clickToFocus: true,
                    shape: "square",
                    debug: false
                });
             });

我的基本 HTML 结构：

    <div id="content">
    <div id="inner-content">
        <div id="main">
            <article class="post">
                Wordpress Content
            </article>
            <article class="post">
                Wordpress Content
            </article>
            <article class="post">
                Wordpress Content
            </article>
        </div>
    </div>
</div>

适当的 CSS：

#content {
  margin-top: 1.5em;
}
#content #inner-content {
  background-color: #FFFFFF;
  padding: 0 20px;
  position: relative;
}
#content #inner-content #main {
  margin: 25px auto;
  width: 85%;
}
#content #inner-content #main .roundabout-holder {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 5em;
  width: 100%;
}
#content #inner-content #main .roundabout-moveable-item {
  height: 4em;
  width: 85%;
  cursor: pointer;
  background-color: #ccc;
  border: 1px solid #999;
  margin: 20px 0;
}
#content #inner-content #main .roundabout-in-focus {
  cursor: auto;
}

为什么不提供一个很好的屏幕截图呢？

4

1 回答 1

0

您将高度#content #inner-content #main设置为 5em；使用 min-height 设置它，并使该值成为轮播在 body 框架中显示所需的最小值。内容应该使它从那里成长。

一些轮播还需要一些偏移填充以适应前进、后退和帧控制。仔细检查文档是否有类似的东西

#content #inner-content #main {
  min-height: 500px; /* or whatever value is required */
}

编辑 3/3/13：

我正在为您添加一个指向Roundabout标准实现的链接。看看 HTML 与你在做什么。他的插件是列表驱动<li>的，这也是你应该使用的。之后你可能需要稍微调整一下 CSS，但没什么大不了的。请记住，如果您使用某人的插件，则需要像他们为您提供的示例一样对其进行设置。如果您从那时起遇到问题，那么解决起来会容易得多。

<ul>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
</ul>
于 2013-03-03T01:00:04.960 回答