Проблема CSS - Как предотвратить перенос плавающих объектов в контейнере без изменения размера контейнера? - PullRequest
Новая
       17

Проблема CSS - Как предотвратить перенос плавающих объектов в контейнере без изменения размера контейнера?

0 голосов
/ 05 июня 2011

Вот мой документ JSfiddle:

http://jsfiddle.net/TSM_mac/xXcZx/1/

По сути, я пытаюсь заставить второй div скользить, когда первый div выдвигается.

У меня проблема с моим CSS, второй div (потому что это float: left) переходит на следующую строку

Способ исправить это - убедиться, что они всегда остаются на одной линии, но я не могу понять это: (.

Есть предложения?

С уважением,

Тэйлор * * 1016

Ответы [ 2 ]

1 голос
/ 05 июня 2011

Вот что я придумал: http://jsfiddle.net/wdm954/xXcZx/7/

Я добавил <div id="wrapper"> вокруг других ваших DIV с помощью overflow:hidden, удалил стиль из #container и динамически установил его ширину с помощью jQuery.

$('#container').width(function() {
    return $('.page').width() * $('.page').length;
});

Поскольку у вас есть класс .page на каждом из ваших DIV, вы можете использовать его вместо каждого идентификатора. 

$('#move').live('click', function () {
    $('.page').addClass('slideLeftOut');
});

Я не уверен, что это был вашнамерение, но после того, как анимация ключевого кадра webkit была завершена, она возвращалась к началу (Объект 1).Если ваше намерение состояло в том, чтобы «Объект 2» оставался в поле зрения после завершения анимации, попробуйте это ... 

.slideLeftOut {
    -webkit-transition: -webkit-transform 4s linear;
    -webkit-transform: translateX(-100%);
}
0 голосов
/ 05 июня 2011

Вы можете сделать: 

white-space: nowrap;

на контейнере, а затем: 

display: inline-block;

на детей. Тогда вы можете поиграть с полями, не зная точно, что вы пытаетесь достичь. Но я не уверен, что это самый элегантный способ сделать это. В любом случае, вот версия вашей скрипки, которая не переносится, дайте мне знать, если я неправильно понял:

http://jsfiddle.net/xXcZx/5/

...