встроенные div со скрытым переполнением

Я хочу создать 3 div рядом, когда виден только один из них.

-------------- -------------- --------------
| visible    | | invisible  | | invisible  |
|            | |            | |            |
-------------- -------------- --------------

Для этого я попытался создать обертку div шириной 100 пикселей и скрытым переполнением. Что я делаю неправильно?

<div style="width:50px;height:349px; overflow:hidden">
<div style="display: inline;">first div</div>
<div style="display: inline;">second div</div>
<div style="display: inline;">third div</div>
</div>

html css overflow width hidden
person Jim    schedule 16.01.2011    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вы должны сделать обертку div достаточно большой (по ширине), чтобы вместить все три div. Затем вы можете обернуть вокруг него другой div со скрытым переполнением.

person Paul    schedule 16.01.2011

arrow_upward
7
arrow_downward

display: inline не позволяет вам устанавливать ширину. Вместо этого вы должны использовать display: inline-block.

Кроссбраузерные проблемы:

  • Это не будет работать должным образом с IE, который разрешает inline-block только для естественных inline элементов, таких как <span>s, поэтому вы можете либо преобразовать <div>s в <span>s, либо использовать хак IE: display:inline-block; zoom:1; *display:inline;

  • А для Firefox версии 2 и ниже вам понадобится display: -moz-inline-stack;.

person David Tang    schedule 16.01.2011

arrow_upward
1
arrow_downward

Вы пытаетесь установить ширину элемента display: inline.

Вместо этого попробуйте inline-block.

person Quentin    schedule 16.01.2011
comment
Таким образом, элементы div по-прежнему отображаются один над другим, а не рядом. - person Jim; 16.01.2011

arrow_upward
1
arrow_downward

плавать три div слева. Это сработает

<div style="width:50px;height:349px; overflow:hidden; border solid 1px;">
   <div style="float:left;width:100px; border solid 1px">first div</div>
   <div style="float:left;width:100px; border solid 1px;">second div</div>
   <div style="float:left;width:100px; border solid 1px;">third div</div>
</div>

Исправлено:

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

<div style="width:120px;height:349px; overflow:hidden; border: solid 1px;">
   <div style='height: 349px; width: 310px'>
    <div style="float:left;width:100px; height: 100px; border: solid 1px">first div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">second div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">third div</div>
   </div>
</div>
person Glycerine    schedule 16.01.2011
comment
Таким образом, элементы div по-прежнему отображаются один над другим, а не рядом. - person Jim; 16.01.2011