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

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

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

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

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

Любая помощь приветствуется.


html css stretch css-float
person Bas Slagter    schedule 21.11.2011    source источник

Ответы (5)


arrow_upward
1
arrow_downward

вот решение, использующее 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;
}
person MikeM    schedule 21.11.2011
comment
Это хороший вариант, но, конечно, я бы предпочел использовать float для статей, потому что это избавляет меня от редактирования левого свойства каждый раз, когда я хочу добавить поле или что-то в этом роде (или, например, добавить четвертый элемент). Спасибо, в любом случае! - person Bas Slagter; 22.11.2011
comment
Сладкий! Кажется, это работает хорошо. Единственное, обертка не растягивается (что видно, если добавить к ней фоновый цвет). - person Bas Slagter; 22.11.2011
comment
обертка div? Думаю, я не вижу того, что видите вы. - person MikeM; 22.11.2011
comment
Да, элемент div-оболочки, который закрепляет статьи. - person Bas Slagter; 22.11.2011

arrow_upward
1
arrow_downward

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

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

Настройте margin-left на элементе .articles, чтобы статьи скользили. Это свойство вы бы анимировали с помощью 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>
person simshaun    schedule 21.11.2011
comment
Но я не хочу указывать конкретную ширину для контейнера статей (например, 20000em). Он просто должен быть такой же ширины, как ширина трех внутренних статей (3x 800 и несколько полей). - person Bas Slagter; 22.11.2011
comment
Вы должны A. указать действительно большую ширину и скрыть переполнение, как в моем примере, или B. использовать таблицы. В противном случае ваши поплавки будут складываться после того, как их общая ширина составит >100% ширины контейнера. Все, что вам нужно сделать в моем примере, это изменить «400px» на «800px», и все будет готово. - person simshaun; 22.11.2011
comment
Дело в том, что я хотел использовать позицию элемента-обертки, чтобы проделывать некоторые трюки с js, но если этот элемент не подходит к внутренним элементам, это невозможно сделать. Но я думаю, что у меня нет другого выбора, кроме как указать ширину элемента-оболочки. - person Bas Slagter; 22.11.2011
comment
Что ты собирался делать? Возможно, еще есть способы добиться того, чего вы хотите. - person simshaun; 22.11.2011
comment
Для начала я хочу, чтобы элемент-оболочка скользил слева направо (перемещая внутренние статьи также слева направо). Это хорошо работает, но я хочу заблокировать движение влево или вправо, если, например, правое положение обертки опустится ниже нуля. Поскольку теперь у нас есть фиксированный с, эта позиция больше не надежна. - person Bas Slagter; 22.11.2011
comment
Как я сказал в ответе, вы можете легко перемещать оболочку слева направо (перемещая внутренние статьи), анимируя свойство div.articles margin-left. например чтобы перейти к 3-й панели, анимируйте ее до -1600px. Кроме того, предотвращение перехода к несуществующей панели должно выполняться с помощью индекса панели, например. if (go_to_index < 0 || go_to_index > num_panels) return false; - person simshaun; 22.11.2011
comment
Что ж, предотвращение скольжения — это проблема, которую я решу позже. На данный момент я просто хочу, скажем, левое движение слайда, где сначала третья панель не видна (потому что она отстает от переполнения) и скользит по первому движению слайда влево. - person Bas Slagter; 22.11.2011
comment
Я пойду с фиксированной шириной обертки и исправлю отключение параметров слайда другим способом. Большое спасибо! - person Bas Slagter; 22.11.2011

arrow_upward
-1
arrow_downward

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

person comu    schedule 21.11.2011
comment
Я не думаю, что это все... Я все еще не вижу трех статей в одной строке. Ты? - person Bas Slagter; 22.11.2011
comment
Я не вижу, чтобы он работал ни в одном из браузеров... Однако я вижу горизонтальную полосу прокрутки. - person Bas Slagter; 22.11.2011

arrow_upward
-1
arrow_downward

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

и display:inline с вашим поплавком...

person Joe Conlin    schedule 21.11.2011
comment
Но я хочу, чтобы статьи были шириной ровно 800 пикселей. Теперь кажется, что они соответствуют 100% внешнего div (что в основном соответствует ширине окна). Кстати, в твоей скрипке я все еще вижу их ниже друг друга. - person Bas Slagter; 22.11.2011
comment
Чтобы уточнить... вы хотите, чтобы КАЖДАЯ статья была шириной 800 пикселей ИЛИ суммарная сумма и сколько статей было 800? И все статьи встроены? - person Joe Conlin; 22.11.2011
comment
Каждая статья должна быть ровно 800 пикселей... и элемент обтекания должен соответствовать этой ширине. - person Bas Slagter; 22.11.2011

arrow_upward
-1
arrow_downward

Похоже, это работает как в 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>
person AR.    schedule 21.11.2011
comment
Я сохранил его локально и изменил ширину статьи (или div в вашем примере) на 800 пикселей и бум, вернувшись к тому, с чего мы начали. - person Bas Slagter; 22.11.2011