3

我正在制作一个 HTML/CSS 轮播。

HTML：

<body>
    <div id="container">
        <div id="wrapper">
            <div id="d1" class="box"><p>DIV#1</p></div>
            <div id="d2" class="box"><p>DIV#2</p></div>
            <div id="d3" class="box"><p>DIV#3</p></div>
            <div id="d4" class="box"><p>DIV#4</p></div>
        </div>
    </div>
</body>

CSS：

.box {
    height: 100px;
    width: 100px;
    margin: 15px;
    border: 2px solid black;
    color: black;
    float: left;
}

#container {
    width: 150px;
    height: 144px;
    overflow: hidden;
    border: 2px solid black;
}

#wrapper {
    height: 140px;
    width: 555px;
    border: 2px solid green;
    position: relative;
    left: 0px;
}

#d1 {
    background-color: blue;
}

#d2 {
    background-color: red;
}

#d3 {
    background-color: green;
}

#d4 {
    background-color: yellow;
}

这是小提琴：http: //jsfiddle.net/97jhB/。
我打算稍后为左/右按钮添加 javascript 控件和规定。
首先，我只想从概念上了解它是如何工作的。

我试图通过玩包装器来获得轮播“效果” left。
如果我继续减少 wrapper's left，我将能够连续看到这些盒子。

我有一些问题：

  1. 如果我不将包装器设置position为relative，则对其所做的更改left不会生效。为什么呢？包装器不应该是relative默认的吗？

  2. 如果我使用包装器margin-left而不是left，它似乎可以按需要工作。
    这两种方法之间哪个更好：玩left还是玩margin-left？

4

3 回答 3

4

因为只有relative,absolute和fixed定位使用left, right, top, andbottom来定义它们相对于它们所在的当前上下文的位置。

Fixed 是相对于视口的，absolute 是从正常的页面流中取出的，相对于第一个父级并设置了 CSS 位置，relative 只是相对于最近的块级祖先。

static是默认位置，并使用margin-left,margin-right等在最近的块级祖先中相对于页面流中的其他元素定位元素。

另外，请注意 position:fixed 在较旧的移动设备上无法正常工作。

MDN 有关于这个主题的大量文档。

于 2013-08-10T16:38:02.160 回答
0

当您将position:relativeCSS 声明分配给 div 时，您实际上并没有移动它在页面上占用的空间，而只是移动它的显示位置。

但是，如果未明确指定，则默认位置适用static于任何 html 元素。

position: static;

查看 SO 上的此链接，以获得对margin-left v/s left差异的非常完整的解释

左边距和左边距的区别

于 2013-08-10T16:42:48.650 回答
0

  1. Static 是默认设置，最好的办法是拥有 wrapperrelative和 items absolute，这样溢出的项目不会到底部（〜不会创建新行）......你必须删除float:leftif你想走这条路。

  2. 使用左（或右，如果 RTL）可能会更好，如果您想要在轮播幻灯片之间留出一些边距怎么办，想想您有多个可见项目的场景。

于 2013-08-10T16:44:24.063 回答