wbudowane elementy div z ukrytym przelewem

Question

Chcę utworzyć 3 elementy div obok siebie, gdy widoczny jest tylko jeden z nich.

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

W tym celu próbowałem utworzyć element div do zawijania o szerokości 100 pikseli i ukrytym przepełnieniu. Co ja robię źle?

<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

Musisz zrobić duży zawijanie div (w szerokości), aby pomieścić wszystkie trzy elementy div. Wtedy możesz owinąć kolejny element div z ukrytym przelewem.

Answer 2

Próbujesz ustawić szerokość elementu, który jest display: inline.

Zamiast tego spróbuj inline-block.

Answer 3

display: inline nie pozwala ustawić szerokości. Zamiast tego powinieneś użyć display: inline-block.

kwestie Cross-browser:

• To nie będzie działać poprawnie z IE, który pozwala jedynie inline-block na naturalnie inline elementów, takich jak <span> s, więc można albo przekształcić <div> s do <span> s lub użyj haka IE: display:inline-block; zoom:1; *display:inline;

• A w przypadku Firefoksa v2 i nowszych będziesz potrzebować display: -moz-inline-stack;.

Answer 4

unosić trzy divy w lewo. Że będziemy pracować

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

Poprawiono:

Bardzo mi przykro - I rozwiązał pewne zmiany. Zmieniłem wartości szerokości na div rodzica, aby pokazać przykład - więc edytuj go, jak chcesz.

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