1

我在一个包装器 div 中有 3 个 div。在我的包装 div 中，我最左边的 div 是一个箭头图像，我使用 js 在滑块之间导航。中间的 div 是滑块，右边的 div 是向右箭头移动到下一个滑块。

这是滑块的代码：

<div class="twocol_double">
    <div class="btn_left"></div>
    <div id="slide_wrapper">
        <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">

            <h3>Heading1</h3>

            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in vol</p>
        </div>
    </div>
    <div class="btn_right"></div>
</div>

会有多个slide类，但为了这个问题，我只添加了 1 个。

但由于某种原因，我的右 div 和我的右箭头被向下推。在 Chromes 元素检查器中查看它，我的滑块 div 上有一个 50px 的右边距，我没有在任何地方定义（我看到橙色，但没有 CSS 标记）。

我在这里重新创建了 jsfildde 中的问题：http: //jsfiddle.net/maZbF/1/

我希望那个右箭头与其他两个 div 对齐。我已经破坏了我的大脑，试图弄清楚这一点并在 chrome 中调试它，但无济于事。我错过了一些简单的东西吗？

4

2 回答 2

5

为了使浮动内容保持在同一行，所有浮动内容都必须在任何正常内容之前定义。

在这种情况下，您的左按钮首先向左浮动，因为它是第一个。然后你有你的分区，它没有浮动并且是display: block. 块级元素将始终将其后的任何内容推送到下一行，即使您为其定义了宽度。因此，当它之后到达您的右侧按钮时，它从新行开始并浮动到该新行的右侧。它从顶部向下 131px 开始，因为在此之前您的分区已height: 131px定义（并且其中的其他内容只是溢出边界，不会干扰您的右浮动元素）。

所以，你有几个选择：

  1. 在左侧按钮之后立即定义您的右侧按钮。

  2. 将所有三个元素浮动到左侧，使它们彼此堆叠。

于 2013-02-15T20:30:28.470 回答
2

我认为您遇到的问题是您的右侧 div 是position:relative，而左侧是position:absolute. 我认为您可以使用简单的浮点数来简化此布局：

HTML

    <div class="twocol_double">
    <div class="btn_left"></div>
    <div id="slide_wrapper">
        <div class="slide">
            <h3>Heading1</h3>
            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in vol</p>
        </div>
    </div>
    <div class="btn_right"></div>
</div>

CSS

.twocol_double {
    width: 500px;
    float: left;
    font-size: 1.2em;
}
.btn_left {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 170px;
    float: left;
    background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center;
}
#slide_wrapper {
    width: 460px;
    height: 131px;
    display: block;
    float:left;
}
.btn_right {
    cursor: pointer;
    width: 20px;
    height: 170px;
    float: right;
    background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center;
}
h3 {
    font-size: 1.5em;
    color: #7DAC20;
}
p, blockquote {
    padding-bottom: 20px;
    font-size: 1.3em;
    color: #636B75;
    line-height: 20px;
}

http://jsfiddle.net/Eb3TA/

于 2013-02-15T20:28:55.207 回答