Как позволить плавающим элементам div растягивать ширину внешнего элемента div - PullRequest
Новая
       11

Как позволить плавающим элементам div растягивать ширину внешнего элемента div

1 голос
/ 22 ноября 2011

Я создаю новую страницу, где я хочу включить слайдер, который скользит слева направо.У меня есть div внутри раздела, и внутри него есть три плавающих статьи.Я хочу, чтобы элемент div (обертки) растягивался по ширине, чтобы внутренние статьи попали в одну горизонтальную линию.

Вот код: http://jsfiddle.net/jFSz4/

Я не могузаставить его работать без указания фиксированной ширины для элемента div (например, 3000px), но это не то, что я хочу.Представьте себе, что произойдет, если я добавлю четвертое деление.

Итак, я хочу, чтобы каждая статья имела ширину ровно 800 пикселей, а оберточный элемент должен соответствовать этой ширине.1010 *

Ответы [ 5 ]

1 голос
/ 22 ноября 2011

вот решение с использованием position:relative для обертки и position:absolute для статей, где смещение left каждой статьи увеличивается на 800px (ширина одной статьи)

Я использую псевдокласс :nth-child(n), чтобы установить это, но вы могли бы просто установить вместо него класс / идентификатор каждой статьи

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

редактировать: решение без 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;
}
1 голос
/ 22 ноября 2011

Попробуйте это ..

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>
0 голосов
/ 22 ноября 2011

Так что, похоже, это работает как в IE, так и в FF, но я не совсем уверен, что это то, что вы хотите ... Я переключил теги статьи на div с классом статьи и добавил width: 100%; в слайдер div.1002 * 

 <!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 голосов
/ 22 ноября 2011

Использовать проценты ... http://jsfiddle.net/jFSz4/2/

и отображать: в строке с вашим поплавком ...

0 голосов
/ 22 ноября 2011

Это то, что вы спрашиваете? http://jsfiddle.net/jFSz4/3/? Я просто добавил width:100% к элементу #slider div

...