css - css、float:left、テキストを独自の列に保持

Question

2 つの float:left 要素が隣り合っています。親要素が狭すぎて両方のテキストを 1 行に収められない場合、テキストを次の行に移動しますが、それぞれが独自の「列」になります。親幅はフレキシブルなのでどうなるかわかりません。

http://jsfiddle.net/jsHCJ/1/は、問題と、解決策をどのように見せたいかを示しています。

<div id = "page2">
    <div class = "f1">
        float 1
    </div>
    <div class = "f2">
        float 2 and long
    </div>
</div>

#page2 {width:110px; }  

.f1{ 
  background:pink; 
 float:left;
}

.f2{
    background:yellow;
    float:left;
}

Answer 1

#page2 に css を追加してみてください

display: inline;

これはあなたの問題を解決します

Answer 2

単純。display:table-cell;両方の div に使用します。

これにより、ページが縮小または拡大すると、div が同じ場所に配置され、それに応じてテキストが拡大または縮小されます。