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

Question

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

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

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

<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>

Answer 1

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

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

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

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

Answer 2

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

Answer 3

плавают три оставшихся деления. Это сработает

<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>

Answer 4

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

Попробуйте inline-block.