3

CSSに少し問題があります。

次の例のように構造化されたいくつかのdiv要素があります。動的な数のclass="block" divがあり、それぞれの幅は固定されています。

<div class="outer-container">
    <div class="inner-container">
        <div class="block">text</div>
        <div class="block">text</div>
        <div class="block">text</div>
        <!-- More "block" divs here -->
    </div>
</div>

私の目標は、CSSベースのソリューションを見つけることです。

  1. class="block"divを新しい行に折り返さずに、インラインで表示します。
  2. 上記のような可変数のclass="inner-container"divをサポートし、それぞれが独自の行として表示されます。
  3. "shrink-wrap"中身の幅に合わせて外側の容器を流動的にします。

助言がありますか？

4

2 に答える 2

1

これがあなたが探しているものかどうかは 100% わかりませんが、それが出発点かもしれません:

http://jsfiddle.net/r4dEX/3/

各block要素をdisplay: inline-blockとwhite-space: nowrapに設定することで、要素が互いに並んで配置されるようになりますが、コンテンツが使用可能なスペースよりも長い場合に新しい行に折り返されることはありません (代わりにblockが新しい行に移動します)。

それぞれinner-containerが独自の行に表示されます ( display: blocka のデフォルトの動作ですdiv)。

外側のコンテナを に設定するdisplay: inline-blockと、コンテンツに合わせて「シュリンク ラップ」が行われます。

于 2012-10-17T08:50:35.290 に答える
0

これは、ブロックがインラインで、内側のコンテナの幅が固定され、外側のコンテナが収まるように縮小されている例です。

于 2012-10-17T08:53:10.590 に答える