インラインdivと非表示オーバーフロー

Question

1つしか表示されていない場合、3つのdivを並べて表示したいと思います。

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

これを行うために、私は100pxの幅と隠れたオーバーフローでラップするdivを作成しようとしました。私は間違って何をしていますか？

<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

3つのdivをすべて保持するには、折り返しdivを十分大きく（幅で）作成する必要があります。その後、オーバーフローを隠して別のdivを囲むことができます。

Answer 2

要素の幅をdisplay: inlineに設定しようとしています。

代わりにinline-blockを試してください。

Answer 3

display: inline幅を設定できません。代わりにdisplay: inline-blockを使用してください。

クロスブラウザの問題：

• あなたに<div>秒に変換することができますいずれかのように、これは、唯一の自然inline要素にinline-blockすることができますIE、など<span>秒で正しく動作しません。 <span> sまたはIEハックを使用してください。display:inline-block; zoom:1; *display:inline;

• Firefox v2以下では、display: -moz-inline-stack;が必要です。

Answer 4

float 3つのdivsが残っています。それは修正さ

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

をうまくいく：

私は非常に残念です - 私はいくつかの編集を元に戻しました。親divの幅の値を変更して例を表示していますので、編集してください。

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