elementy inline-block w ustalonym pojemnika szerokości z przelewem: ukryty się strącony

Question

Zobacz moje skrzypce tutaj: http://jsfiddle.net/Waterstraal/bMfbH/2/

HTML:

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

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 chcesz "przesunąć" panel wyników w prawo (więc nadal jest na tym samym poziomie co panel akcji), ale zamiast tego zostanie on zepchnięty w dół poza widok.

Szerokość elementu actionPanel jest zwiększana w javascript, dzięki czemu całkowita szerokość dwóch elementów jest większa niż szerokość elementu nadrzędnego.

Czy ktoś wie, w jaki sposób mogę osiągnąć efekt, którego szukam? Próbowałem użyć elementów pływających, ale taki sam wynik. Próbowałem również użyć elementu tabeli, bez efektu.

Z góry dziękuję.

Answer 1

Dodaj white-space: nowrap do kontenera elementów wbudowanego bloku, w tym przypadku .row.

http://jsfiddle.net/thirtydot/bMfbH/3/

Answer 2

Zmień 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; 
}