2013-08-01 22 views
5

Vedi il mio violino qui: http://jsfiddle.net/Waterstraal/bMfbH/2/elementi inline-block all'interno di un contenitore di larghezza fissa con overflow: hidden ottenere spinto verso il basso

Il codice HTML:

<div class="row"> 
    <div class="actionPanel"></div><div class="resultPanel"></div> 
</div> 

Il CSS:

.row { 
    width:500px; 
    height: 50px; 
    overflow:hidden; 
    border:1px solid #ccc; 
} 
.resultPanel { 
    display:inline-block; 
    width:450px; 
    height: 50px; 
    background: #ddd; 
} 
.actionPanel { 
    display:inline-block; 
    width:50px; 
    height: 50px; 
    background:#eee; 
} 

I vuoi "far scorrere" il pannello dei risultati a destra (quindi è ancora allo stesso livello di actionPanel), ma invece viene spinto fuori dalla vista.

La larghezza di actionPanel viene ingrandita in javascript in modo che la larghezza totale dei due elementi sia maggiore della larghezza dell'elemento genitore.

Qualcuno sa come posso ottenere l'effetto che sto cercando? Ho provato ad usare elementi fluttuanti, ma questo ha avuto lo stesso risultato. Ho anche provato a usare un elemento di tabella, senza alcun effetto.

Grazie in anticipo.

risposta

0

Cambio css:

body { 
padding:10px; 
} 
.row { 
width:500px; 
height: 50px; 
overflow:hidden; 
border:1px solid #ccc; 
} 
.resultPanel { 
height: 50px; 
background: #ddd; 
} 
.actionPanel { 
float:left; 
width:50px; 
height: 50px; 
background:#eee; 
} 
Problemi correlati