0

あなたの仲間の一人がこれに対する答えを知っていることを願っています.

2 つのフローティング DIVS と、最小幅の DIV コンテナー コンテンツが 1 つあります。ウィンドウのサイズを変更し、ウィンドウが最小幅のコンテンツよりも小さい場合、コンテンツが親コンテナーからはみ出します。

親コンテナを拡張して、最小コンテンツを内側に置いて、ブラウザの下部に水平スクローラーを表示するのではなく、拡張することを望みます。

誰でも解決策を知っていますか？

<html>
    <style>
        .outer {
            width:100%;
            border:2px solid green;
            position:relative;
        }
        .left {
            float:left;
            width:20%;
            max-width:250px;
            background:red;
        }
        .right {
            float:left;
            width:80%;
            background:#eee;
        }
        .inner {
            min-width:620px;
            border:1px solid blue;
        }
        .clear {
            clear:both;
        }
    </style>
    <div class='outer'>
        <div class='left'>This is an inner content page. This is an inner content page.This is an
            inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.This is
            an inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.</div>
        <div
        class='right'>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
    </div>
    <div style='clear:both'></div>
    </div>

ブラウザー ウィンドウが拡大するときに、スクローラーを (DIV ではなく) 水平方向に表示するようにします。

4

2 に答える 2

0

一番上の親の幅を 100% に設定しています。この場合、親よりも大きくなることはありませんbody。.outer要素を大きくしたい場合は、固定幅http://jsfiddle.net/ETcf2/を指定できます。

それと削除するとmin-width、浮動要素は期待どおりに動作します。

于 2011-02-23T22:14:59.330 に答える
0

試す

.outer {
    width:100%;
    border:2px solid green;
    position:relative;
    overflow: scroll;
}
于 2011-02-23T22:15:26.323 に答える