css - 如何让 float 的div拉伸(stretch)外部div的宽度

Question

我正在构建一个新页面，我想在其中包含一个从左向右滑动的 slider 。我在一个部分中有一个 div，在该 div 中我有三个 float 文章。我想要的是(包装器)div 元素随其宽度拉伸(stretch)，以便内部文章排成一条水平线。

这是一些代码:http://jsfiddle.net/jFSz4/

如果不为 div 元素指定固定宽度(如 3000 像素)，我无法让它工作，但这不是我想要的。想象一下如果我添加第四个 div 会发生什么。

因此，我希望每篇文章的宽度恰好为 800 像素，并且环绕元素需要调整到该宽度。

感谢任何帮助。

Answer 1

这里有一个解决方案，对包装器使用 position:relative，对文章使用 position:absolute，其中每篇文章的 left 偏移量增加了 800px(一篇文章的宽度)

我正在使用伪类 :nth-child(n) 来设置它，但您也可以轻松地设置每篇文章的类/id

http://jsfiddle.net/pxfunc/jFSz4/20/

---

编辑:没有position:absolute的解决方案

这是一个使用 display:inline-block; 的解决方案 (which is arguably better than float)

http://jsfiddle.net/pxfunc/jFSz4/22/

#slider{
    background: green;
}

#slider div{
    background: yellow;
    overflow:hidden;
    white-space:nowrap;
}

#slider article{
    display:inline-block;
    width:800px;
    border:1px solid #000;
}