Поместите два делителя шириной 100% бок о бок

Question

Поместите два делителя шириной 100% бок о бок

0

Поэтому, если я хочу иметь два divs, каждый из 100% всей страницы, бок о бок, учитывая, что оболочка имеет overflow:hidden, как мне следует ее реализовать?

Я пробовал использовать inline-block но он не работал.

Я попытался с помощью float тоже, но это вызвало ошибку.

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

Заранее спасибо!

ihsoy ih 23 сен. 2013, в 17:34

Источник

Теги:

javascript

html

css

3 ответа

2

Если я правильно вас понял, вы можете добиться того, что после использования inline-block. Вам просто нужно быть немного осторожным с белым пространством (то есть вам нужно убедиться, что у вас нет пробела между двумя дочерними элементами div). Я остановил div от упаковки путем установки white-space: nowrap; ,

<div class="foo">
    <div> woo woo !</div><div> woo woo !</div>
</div>

.foo {
    overflow: hidden;
    white-space: nowrap;        
}
    .foo > div {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        background: lime;
    }

Попробуйте это на http://jsfiddle.net/8Q3pS/2/.

Изменить: Здесь альтернативная реализация с использованием position: absolute; : http://jsfiddle.net/8Q3pS/5/. Таким образом, вы сможете анимировать второй, используя left. Обратите внимание, что вам нужно установить высоту родительского div.

.foo {
    position: relative;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
}
    .foo > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        left: 100%;
        background: lime;
    }

Olly Hodgson 23 сен. 2013, в 12:34

0

Должен ли контейнер быть position:relative ?
ihsoy ih 23 сен. 2013, в 15:21
0

Не в первом примере - я буду редактировать. Во втором примере контейнер должен быть расположен так, чтобы дочерние элементы были расположены относительно него.
Olly Hodgson 23 сен. 2013, в 15:22

0

Не можете ли вы установить максимальную ширину на 100%, а не устанавливать фактическую ширину и плавать рядом? При переполнении: скрытые, поскольку они расширяются, они должны создавать горизонтальные полосы прокрутки.

KnowHowSolutions 23 сен. 2013, в 13:10

2

Это спрашивает, чего хочет ОП, и поэтому лучше подходит для комментариев, чем для ответа.
Mr Lister 23 сен. 2013, в 15:05
0

Извините, я отредактировал свой вопрос. Я не хочу полосы прокрутки, она должна быть полностью скрыта от глаз.
ihsoy ih 23 сен. 2013, в 15:05
0

Вы правы, это должен быть комментарий, и вы не поняли его до тех пор, пока я его не отправил.
KnowHowSolutions 23 сен. 2013, в 21:11

Показать ещё 1 комментарий

Ещё вопросы

Должен ли контейнер быть position:relative ?
Не в первом примере - я буду редактировать. Во втором примере контейнер должен быть расположен так, чтобы дочерние элементы были расположены относительно него.
Это спрашивает, чего хочет ОП, и поэтому лучше подходит для комментариев, чем для ответа.
Извините, я отредактировал свой вопрос. Я не хочу полосы прокрутки, она должна быть полностью скрыта от глаз.
Вы правы, это должен быть комментарий, и вы не поняли его до тех пор, пока я его не отправил.

Paulie_D · Accepted Answer · 2013-09-23T13-03-00.000Z

Это должно быть исключительно вопросом позиционирования одного из разделов с страницы с использованием абсолютного позиционирования и перехода к левому свойству с использованием состояния зависания или javascript.

Наведите красный div.

Пример Codepen

Спасибо и Олли, но у этого был лучший пример. В любом случае, спасибо вам обоим!
@Paulie_D Извините, что беспокою вас снова, но есть ли способ сделать содержимое относительным, а не абсолютным? Прямо сейчас весь контейнер разрушается.