9

この内部コンテンツ div の幅をスクロール可能領域の幅と等しくするにはどうすればよいですか?

<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

CSSで：

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: nowrap;
}

jsFiddle: http://jsfiddle.net/XBVsR/12/

問題:横にスクロールすると、背景が完全に横切られていないことがわかります。

width: 100%、overflow: visible などを設定してみましたが、役に立ちませんでした。

編集:テキストを折り返したくないことを明確にするために更新しました-全体で水平スクロールが必要です。

4

5 に答える 5

11

display: table-row;ネストされた div に使用できます。見るjsfiddle

于 2013-07-01T13:53:53.880 に答える
0

外側の div を幅 300px に設定する場合はできません。これは、境界ボックスを破る途切れのないテキストです。ただし、これをコンテンツ CSS に追加することで単語をラップできます。

word-wrap: break-word;

ただし、その 300px が問題にならない場合は、overflow: auto をスクロール可能なクラスからコンテンツ クラスに移動できます。これにより、バックグラウンドの問題も修正されるはずです。

于 2013-07-01T13:54:22.530 に答える
0

.content クラスに追加

overflow: auto;

ここでフィドルを更新しました：http://jsfiddle.net/XBVsR/11/

これはクラス .content を持つすべての要素に影響することに注意してください。別のクラス名も付けたいと思うかもしれません。

于 2013-07-01T13:51:02.230 に答える