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

Question

Я хочу создать 3 divs бок о бок, когда видна только одна из них.

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

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

Answer 2

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

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

Answer 3

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

вопросы кросс-браузер:

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

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

Answer 4

плавать три 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>