2

それは非常に単純な質問です... 一見すると。そして、2番目はそれほど単純ではありません。:-/

div #main に含まれる #content と #sidebar (この順序で!) の 2 つの div があります。#content div には非常に長いテーブルまたは文字列が含まれている可能性があり、それらをトリミングしたり、それ自体の幅を広げたりしてはならないため、overflow:hidden およびあらゆる種類のフローは許可されません。#sidebar div は、#content よりも高い場合があります。#main div は、内部で最も高い div の高さを持つ必要があるため、「位置: 絶対; 上: 0;」for #sidebar は解決策ではありません。

質問: #content にフロートを一切使用せず、すべての div を #main 内に完全に保持しながら、#content div の左側に #sidebar div を設定することは可能ですか?

ここにイラストを作成しました：http://jsfiddle.net/dZLmu/

HTML

<div id="main">
    <div id="content">
        <p>It's a content area. It can contain a very long
            tables or strings which must not be cropped by
            overflow: hidden and must no extend a width of
            div itself. Something like that:</p>
        <p>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</p>
    </div>
    <div id="sidebar">
        <p>It's a sidebar.</p>
        <p>It can be higher then content area.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
    </div>
    <div id="clearfix"></div>
</div>

CSS

#main {
    background-color: silver;
    margin: 0 auto;
    widht: 500px;
    #position: relative;
}

#content {
    background-color: green;
    margin-left: 100px;
}

#sidebar {
    background-color: red;
    float: left;
    width: 100px;
    #position: absolute;
    #top: 0;
}

#clearfix {
    clear: both;
}
4

4 に答える 4

1

可能な解決策：

#content {
    background-color: green;
    display: inline-block;
    max-width: 100%;
    border-left: 100px solid transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#sidebar {
    background-color: red;
    float: left;
    width: 100px;
    margin-right: -100%;
    position: relative; 
}

そこで何が起こるの？まず、 を設定display:inline-blockすると、存在#contentする書式設定コンテキストが#contentブロックからインラインに変更されます (コンテナーwordは、内部にコンテンツのブロック全体を含む 1 つの大きなテキストを持つ 1 行のテキストになります)。次に、その外側の高さを制限し、余白をエミュレートしてフローティング列の場所を保持する透明な境界線を追加します。そして最後に、フローティング div に水平方向の場所を取らないようにし (大きな負のマージンを設定することにより)、相対的な位置を設定することにより有効な z-index を変更します。

しかし、ソース コード内の 2 つの div を交換して、サイドバーが最初に来るようにする方が簡単ではないでしょうか?

于 2013-09-20T12:54:14.763 に答える