Question

我正在构建一个新页面，我想要包含一个从左到右滑动的滑块。我在一个部分内有一个div，在那个div里面我有三篇文章。我想要的是（包装）div元素以它的宽度拉伸，以便内部文章在一条水平线上。

以下是一些代码：http://jsfiddle.net/jFSz4/

如果没有为div元素指定固定宽度（如3000px），我无法工作，但这不是我想要的。想象一下如果我添加第四个div会发生什么。

所以，我希望每篇文章的宽度都是800px，包装元素需要调整到那个宽度。

任何帮助表示感谢。

Answer 1

试试这个..

http://jsfiddle.net/jFSz4/19/

调整margin-left元素上的.articles以滑动文章。这是您使用JavaScript设置动画的属性。

注意：我在文章上使用400px只是为了更容易测试。

<强> 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>

Answer 2

这是一个使用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;
}

Answer 3

这是你要问的吗？ http://jsfiddle.net/jFSz4/3/？我只是将width:100%添加到#slider div元素

Answer 4

使用百分比... http：//jsfiddle.net/jFSz4/2/

并显示：与你的浮动内联......

Answer 5

所以这似乎适用于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>

如何让浮动的div扩展外部div的宽度

5 个答案: