divs en línea con desbordamiento oculto

Question

Quiero crear 3 divs uno al lado del otro cuando solo uno de ellos es visible.

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

Con el fin de hacer esto me han tratado de crear un div envolver con un ancho de 100 px, y rebosadero oculto. ¿Qué estoy haciendo mal?

<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

Tienes que hacer el div de envoltura lo suficientemente grande (en ancho) para contener los tres divs. Entonces podrías envolver otro div con el desbordamiento oculto.

Answer 2

Usted está tratando de establecer un ancho en un elemento que es display: inline.

Pruebe inline-block en su lugar.

Answer 3

display: inline no le permite establecer el ancho. Debería usar display: inline-block en su lugar.

temas varios navegadores:

• Esto no funcionará adecuadamente con IE, que sólo permite inline-block en forma natural inline elementos, tales como <span> s, por lo que puede convertir los <div> s en <span> s o, utilice un hack de IE: display:inline-block; zoom:1; *display:inline;

• Y para Firefox v2 y versiones inferiores, necesitará display: -moz-inline-stack;.

Answer 4

flotan los tres divs restantes. Eso funcionará

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

Corregido:

Lo siento mucho - Deshice algunas modificaciones. Cambié los valores de ancho en el div principal para mostrar el ejemplo, así que edítelo como lo desee.

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