CSS: Плавающие два элемента div со 100% шириной вне экрана?

Я помню, как задавал этот вопрос некоторое время назад, но я не могу найти его снова! Я искал, но не могу найти решение, которое ищу.

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

Я думаю, что решение, которое я получил, состояло в том, чтобы установить для свойства display что-то другое, но я не совсем уверен.

Какие-либо предложения?


html css css-float off-screen
person qwerty    schedule 07.09.2011    source источник
comment
overflow: scroll; или overflow: hidden; в зависимости от того, хотите ли вы, чтобы полоса прокрутки отображалась.   -  person Devin Burke    schedule 07.09.2011
comment
Нет, я не хочу прокручивать вправо. Я просто хочу, чтобы это было за кадром, невидимо.   -  person qwerty    schedule 07.09.2011
comment
Если вы хотите, чтобы он был невидимым, почему бы вам просто не установить display: none?   -  person Shawn Steward    schedule 07.09.2011
comment
Потому что, если я установлю ширину первого div на 0 пикселей, я хочу, чтобы другой div снова был полностью виден.   -  person qwerty    schedule 07.09.2011
comment
Хорошо, вы говорите, что вам нужно или не нужна частичная видимость? Если вы хотите разрешить частичную видимость, overflow: hidden; должно работать.   -  person Devin Burke    schedule 07.09.2011
comment
Предполагается, что он виден, но за пределами экрана (следовательно, не виден, потому что вы не можете видеть, что находится за пределами экрана). Если я установлю первый div с шириной 0px, я хочу, чтобы второй div занимал место (чтобы снова перемещаться по экрану). Это сложно описать, не указывая на это визуально...   -  person qwerty    schedule 07.09.2011

Ответы (3)


arrow_upward
5
arrow_downward

Я считаю, что вам нужно будет иметь контейнер и установить ширину контейнера на 200%. Внутри поместятся два внутренних элемента div шириной 50%.

#container_div{ width:200%}
.inner_div {width:50%}
person Hammad Khan    schedule 07.09.2011
comment
Хм, да, я полагаю, это может сработать. Но тогда мне пришлось бы установить для .inner_div ширину 50%. Видишь, что я имею в виду? Но я попробую! - person qwerty; 07.09.2011

arrow_upward
0
arrow_downward

Вы можете расположить их абсолютно.

<body style="padding:0; margin:0">
    <div style="width:100%; position:relative;">
        <div style="width:100%; height:100px; background:#f90; position:absolute; top:0; left:0;">COLUMN1</div>
        <div style="width:100%; height:100px; background:#f00; position:absolute; top:0; left:100%;">COLUMN2</div>
    </div>
</body>

Они расположены абсолютно в пределах границ относительно позиционированного родителя.

Затем вы переключаетесь между ними, вы просто переключаете левые значения, от 0 до 100% соответственно.

  • высота и цвет фона просто для того, чтобы увидеть, что происходит :)
person Stryder    schedule 07.09.2011

arrow_upward
0
arrow_downward

дайте 50% ширины обоим div, чтобы они вместе занимали 100% ширины

person Sonal Khunt    schedule 09.11.2011