2

ラップしてはならない書式設定済みのテキストを含む列を使用して、柔軟なレイアウトを作成しようとしています。私の問題は、スクロール可能なコンテナーの幅を具体的な幅の値に設定した場合にのみ、列のスクロール バーが表示されることです。% は機能していないようです。その場合、その周りの列はブラウザー ウィンドウで正しくサイズ変更されますが、コンテナーの幅は固定されているため、それに応じて変更されません。

この優れたチュートリアルは、列を作成するのに大いに役立ちました: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksですが、サイズ変更可能なコンテンツに基づいています。

純粋なCSSを使用して、スクロールされたコンテナを列と一緒にサイズ変更する方法はありますか?

スクロールバーでサイズ変更可能な列

4

3 に答える 3

2

私はすでに使用していますoverflow:autoが、フロートは常にコンテンツと同じくらいのスペースを占めていました。これにより、列が画面サイズを超えて拡張されました。

私はこのSOの質問で答えを見つけました: divにフローティングされた子divを含めるように強制します

基本的に、コンテナーに浮動要素を含めて、コンテナーが崩壊しないようにする必要がありました。http://jsfiddle.net/zfsjb/1/

<style>
    #main {
    clear: both; /* Contain floating elements */
    background-color: red;
    }

    #main:after { /* Prevents the collapsing of the containing element. */
    content: ".";
    clear: both; /*  */
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    #primary {
    float: left;
    margin: 0;
    width: 20%;
    background-color: yellow;
    }
    #secondary {
    float: left;
    width: 80%;
    background-color: blue;
    }
</style>
<div id="main">
    <div id="primary">Primary</div>
    <div id="secondary">Secondary</div>
</div>
于 2013-03-10T10:28:30.373 に答える
1

overflow: scroll左のコンテナに設定し、次に内側pまたは他の要素で幅を設定します

#container1{
    overflow: scroll;
}
#container1 #coll p{
    width: 700px;
}
于 2013-03-10T07:25:44.377 に答える
1

おそらくオーバーフローをスクロールするように設定でき、それで問題が解決すると思います

于 2013-03-10T07:07:44.533 に答える