Question

我在包装器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个。

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

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

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

Answer 1

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

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

所以，你有两个选择：

在左键后立即定义右键。
将所有三个元素浮动到左侧，使它们堆叠在一起。

Answer 2

我认为你遇到的问题是你的右边是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/

我的3个div没有正确排队。最右边的div被未定义的边缘推下来？

2 个答案: