4

このフィドルを参照してください。

ヘッダー#blueの下部から一定の距離 (例: 2em) を維持するには、div の上部が必要です。#redつまり、ヘッダーの垂直方向のサイズが大きくなると、#bluediv を「押し下げる」必要があり#redます (つまり、ビューポートが狭くなってメニュー項目が折り返された結果として)。

私は CSS のみのソリューションを好みますが、CSS だけではこれを行うことができないという私の気持ちを誰かが確認できる場合は、どの jQuery 関数をフックする必要があるか、どの DOM イベントにフックするかについてのアドバイスも必要であり、感謝します.

ノート：

  • それ以外の場合、レイアウトはそのまま機能しますが、現在、#bluediv は (効果的に) 灰色の div の上部から固定距離だけ垂直に配置されてい#pageます。これは、#redヘッダーが高くなるにつれて、 div を「押し下げる」のではなく #red「後ろに」拡張することを意味します。#blue

  • #greenとdiv の順序を#blue(div 内で) 反転できることを除いて、HTML は制約されます#main。

  • #blueは、兄弟を配置する必要があるため、ヘッダーに#page続く論理フローではなく、に対して相対的に配置されます。 #red#green#green #page

    水平位置が達成#greenされる白枠の div に対して相対的に配置され、固定された垂直位置を達成するために絶対に配置されることで、これを (正しいか間違っているかに関わらず)達成しました。#main#main#page

    もちろん、これは の位置に影響を与え#blueます。このdivを他のdivから「ブレイクアウト」して、より「通常の」フローに戻す方法があるかどうかはわかりません。

    の最終結果 が同じであり、ラップの結果として下に移動し、とは無関係である限り#green、私はこのアプローチに制約されません。#page#green#blue#red#green

あなたの時間は非常に感謝!

HTML:

<body>
<div id="page">page
    <header id="red">
        <div id="menu-container">
            <ul id="nav-menu">
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
                <li class="menu-item">menu</li>
            </ul>
        </div>
    </header>
    <div id="main">
        <div id="blue"></div>
        <div id="green"></div>
    </div>
</div>

CSS:

body {
    /*arbitrary*/
    background-color: black;
    padding: 0 1em
}
#page {
    /*arbitrary*/
    background-color: gray;
    border-color:gray;
    border-width:1pt;
    border-style:dotted;
    /* necessary - or at least, the achieved result is */
    max-width: 1000px;
    min-width: 240px;
    margin: 0 auto;
    /* both blue and green positioned relatively to this div */
    position:relative;
}
header {
    /*arbitrary*/
    background-color: red;
    /* necessary - or at least, the achieved result is */
    width: 100%;
}
/* necessary - or at least, the achieved result is */
 #menu-container {
    width: 50%;
}
ul {
    list-style: none;
}
.menu-item {
    margin: 0 0.25em 0 0.25em;
    display: inline-block;
}
#main {
    /*arbitrary*/
    border-color:white;
    border-width:1pt;
    border-style:dotted;
    /* necessary - or at least, the achieved result is */
    position:absolute;
    top: .5em;
    width: 100%;
}
#green {
    /*arbitrary*/
    background-color: green;
    height: 15em;
    /* necessary - or at least, the achieved result is */
    z-index: 100;
    width: 40%;
    position: relative;
    left: 50%;
}
#blue {
    /*arbitrary*/
    background-color: blue;
    height:3em;
    /* necessary - or at least, the achieved result is */
    width:100%;
    /**** here's the problem - top of blue currently 5em below top of grey page.
    But I want it 2em below bottom of red header nomatter how tall red header is ****/
    position: absolute;
    top:5em;
}
4

3 に答える 3

1

相対的な配置を忘れて#green、ページの一番上から絶対に配置してみませんか?

 #page {
    ...
    position:relative;
 }

 #green {
    ...
    position: absolute;
    left: 50%;
    top:0.5em;
 }
于 2013-03-09T17:19:33.463 に答える
0

http://jsfiddle.net/xNUKb/8/

下に取り出すposition: absolute：#mainと#blue

于 2013-03-09T17:18:23.080 に答える
0

絶対配置はおそらく頭痛の種です。しかし、アイデアは非常に単純です。

http://jsfiddle.net/vuwzN/

<div id="red"></div>
<div id="blue"></div>

#red {
   height: 150px; /* variable height*/
   margin-bottom: 50px; /* fixed distance between red and blue */
   background-color: red;
}

#blue {
   height: 100px;
   background-color: blue;
}
于 2013-03-09T17:22:51.750 に答える