3

子を同じ行に保ちながら、サイズが不明なフローティングdiv（子）を境界線（親）でラップするにはどうすればよいですか。

問題は、親divがに設定されていない限りwidth: 100%;、子は上下に折りたたまれる傾向があることです。

ここに画像の説明を入力してください

更新：コードを投稿しているときに、私はそれを理解しました。jsfiddleを参照してください。

私のコードには<div>、子の周りに余分なラッパーがありました。それらを削除するか、に設定する必要がありましたdisplay: inline;。

<div class="body">
    <div class="parent">
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
    </div>
</div>​

他の素晴らしいヒントをありがとう！

4

2 に答える 2

1

display: inline子のdivをまたはに変更しない場合display: inline-block、それらは垂直に積み重ねられます。子供が教育を受けている場合float、そのサイズは親の境界を押し上げることはありません。display: inlineまたはを使用する場合display: inline-block、親がすべてに適合するのに十分な幅があり、親を伸ばすことができる限り、子はインラインになります。

フィドル： http： //jsfiddle.net/MPCsD/1/

于 2012-10-05T01:39:22.777 に答える
0

少なくとも子供または親の幅を固定に設定する必要があると思います。たぶん、Javaスクリプトでそれらを測定することができます。

于 2012-10-05T01:37:13.787 に答える