2

わかりました、問題があります。要するに、ここにフィドルがあります。ここで繰り返します。

HTML:

<div class="container">
        <div class="selected">
            <span>Why don't you cover all the width!?</span>
        </div>
        <div>
            <span>Little content</span>
        </div>
</div>

CSS:

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
}

最初の質問は、なぜ内部divの背景が全体をカバーしないのspanですか? 2 つ目: もちろん、修正をお願いします。

もう1つ、html要素はサードパーティのツールによって生成されますが、これにはアクセスできません。これにより、「すべてを別のdivにラップする」ことができなくなります。CSSのみ、ハードコアのみ！

アップデート：

ちなみに、コンテナはそれ自体のサイズを変更できます (正確には a のframe内側)。frameset

編集：

より多くの情報を提供するために、フィドルを更新しました。問題は、2 番目divが選択されたときに、赤い背景を最長の線の幅まで伸ばしたいということです。

更新 2:

上記の問題はdisplay: table-row;(こちらを参照) で解決できます。難しいのは、コンテンツがコンテナー自体よりも幅が狭い場合でも、これを機能させることです (フィドル)。

4

3 に答える 3

3

Div はwidth:autoデフォルトで持っています。したがって、内側の div は、外側の div と同様に 100px 幅です。スパンが div からオーバーフローします。

この特定のケースでは、最も簡単な解決策は、内側の div に display:inline-block を与えることです。

div div {display:inline-block}

そのため、親には収まりませんが、コンテンツの幅に合わせて成形されます。

フィドルを更新しました。

編集: 2 番目の質問に答えるには: はい、display:inline-block はselecteddiv がコンテナーと同じ幅になるのを防ぎます。
幸いなことに、それは追加することで修正できます

min-width:100%;

display:inline-block に加えて。更新された fiddle をさらに参照してください。

別の編集:
そして、質問は変わり続けます。次に、フレームセット内のフレームについてです。しかたがない。これが、現在定式化されている問題を解決する
最新のフィドルです。しかし、未来がどのような変化をもたらすか見てみましょう...

于 2014-02-12T15:23:39.153 に答える