我正在构建一个新页面，我想在其中包含一个从左到右滑动的滑块。我在一个部分中有一个 div，在那个 div 中我有三篇浮动文章。我想要的是（包装） div 元素随着它的宽度拉伸，以便内部文章进入一条水平线。
这里是一些代码：http://jsfiddle.net/jFSz4/
如果不为 div 元素指定固定宽度（如 3000 像素），我无法让它工作，但这不是我想要的。想象一下如果我添加第四个 div 会发生什么。
所以，我希望每篇文章的宽度正好是 800 像素，并且环绕元素需要调整到该宽度。
任何帮助表示赞赏。
【问题讨论】：
标签： css html css-float stretch
这里有一个解决方案，使用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;
}
【讨论】：
div 包装器？我想我没有看到你所看到的。
试试这个..
调整.articles 元素上的margin-left 以滑动文章。这是您将使用 JavaScript 制作动画的属性。
注意：我在文章上使用 400 像素只是为了便于测试。
CSS：
#slider{
background: green;
width: 800px;
}
#slider .container{
overflow: hidden;
}
#slider .articles{
width: 20000em;
}
#slider article{
background: yellow;
float: left;
width: 400px;
}
HTML：
<section id="slider" >
<div class="container">
<div class="articles" style="margin-left: -200px">
<article>
<header>
<h2>1</h2>
</header>
</article>
<article>
<header>
<h2>2</h2>
</header>
</article>
<article>
<header>
<h2>3</h2>
</header>
</article>
</div> <!-- /articles -->
</div> <!-- /container -->
</section>
【讨论】：
这是你要问的吗？ http://jsfiddle.net/jFSz4/3/?
我只是在#slider div 元素中添加了width:100%
【讨论】：
使用百分比...http://jsfiddle.net/jFSz4/2/
和 display:inline 与你的浮动...
【讨论】：
所以这似乎在 IE 和 FF 中都有效，但我不太确定这是你想要的......
我已将文章标签切换为带有文章类的 div，并将 width: 100%; 添加到滑块 div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>x</title>
<style>
html, body{
width: 100%;
}
#slider{
width: 100%;
height: auto;
overflow: hidden;
background: green;
}
#slider div{
position: absolute;
background: yellow;
overflow: auto;
width: 100%;
}
#slider .article{
position: relative;
float: left;
width: 300px;
border: 1px solid #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="slider" >
<div>
<div class='article'>
<header>
<h2>1</h2>
</header>
</div>
<div class='article'>
<header>
<h2>2</h2>
</header>
</div>
<div class='article'>
<header>
<h2>3</h2>
</header>
</div>
</div>
</div>
</body>
</html>
【讨论】：