div in linea con troppopieno nascosto

Question

Voglio creare 3 div affiancati quando solo uno di essi è visibile.

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

Per fare questo ho cercato di creare un div involucro con una larghezza 100px, e troppopieno nascosto. Che cosa sto facendo di sbagliato?

<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

È necessario rendere il div di avvolgimento grande abbastanza (in larghezza) per contenere tutti e tre i div. Quindi potresti avvolgere un altro div attorno a quello con l'overflow nascosto.

Answer 2

Si sta tentando di impostare una larghezza su un elemento che è display: inline.

Prova inline-block invece.

Answer 3

display: inline non consente di impostare la larghezza. Dovresti usare invece display: inline-block.

problemi cross-browser:

• Questo non funzionerà correttamente con IE, che consente solo inline-block sul naturalmente inline elementi, come ad esempio <span> s, in modo è possibile convertire i <div> s in <span> s alternativa, utilizzare un IE mod: display:inline-block; zoom:1; *display:inline;

• e per Firefox v2 e più basso, avrete bisogno display: -moz-inline-stack;.

Answer 4

float i tre div a sinistra. Questo sarà il lavoro

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

corresse:

Mi dispiace molto - ho slacciato alcune modifiche. Ho modificato i valori della larghezza sul div genitore per mostrare l'esempio, quindi modificalo come preferisci.

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