当前位置：文江博客话题详情

如何让浮动div拉伸外部div的宽度

发布于 2024-12-17 10:42:10 字数 351 浏览 1 评论 0原文

我正在构建一个新页面，我想在其中包含一个从左向右滑动的滑块。我在一个部分中有一个 div，在该 div 中我有三篇浮动文章。我想要的是（包装器）div 元素随其宽度延伸，以便内部文章处于一根水平线上。

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

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

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

任何帮助表示赞赏。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梅倚清风 2024-12-24 10:42:11

这是一个解决方案，使用 position:relative 作为包装器，使用 position:absolute 作为文章，其中每篇文章的 left 偏移量增加 800px （一篇文章的宽度）

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

<一个href="http://jsfiddle.net/pxfunc/jFSz4/20/" rel="nofollow">http://jsfiddle.net/pxfunc/jFSz4/20/

编辑：没有 < 的解决方案code>position:absolute

这是使用 display:inline-block; （可以说比 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;
}

here's a solution using position:relative for the wrapper and position:absolute for the articles where each article's left offset is increased by 800px (the width of one article)

I'm using pseudo-class :nth-child(n) to set this, but you could just as easily set each article's class/id instead

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

edit: solution without position:absolute

here's a solution using 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;
}

回复收藏 0 原文

左岸枫 2024-12-24 10:42:11

试试这个..

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

调整 margin-在 .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>

Try this..

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

Adjust margin-left on the .articles element to slide the articles. This is the property you would animate with JavaScript.

NOTE: I'm using 400px on articles simply for easier testing.

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>

回复收藏 0 原文

断肠人 2024-12-24 10:42:11

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

回复收藏 0 原文

不再见 2024-12-24 10:42:11

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

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

回复收藏 0 原文

居里长安 2024-12-24 10:42:11

所以这似乎在 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>

So this seems to work in both IE and FF, but I'm not quite sure that it's what you want...
I've switched article tags to div with article class and added width: 100%; to slider 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>

回复收藏 0 原文

~没有更多了~