4

请参考this fiddle。

我需要 div 的顶部与标题#blue的底部保持固定距离（例如 2em） 。#red换句话说，当标题的垂直尺寸增加时（即由于视口变窄导致菜单项换行） ，#blue应该“下推”div 。#red

我更喜欢纯 CSS 的解决方案，但如果有人能证实我的感觉，这不能由 CSS 单独完成，那么我还需要并感谢关于我应该挂钩哪些 jQuery 函数以及哪些 DOM 事件的建议.

笔记：

  • 否则布局按原样工作，除了当前div （有效地）垂直定位，距离灰色div#blue顶部的固定距离。#page这意味着随着#red标头变高，会#red在 div 的“后面”延伸，#blue而不是“向下推”它。

  • HTML 是受约束的，除了#green和#bluediv 的顺序可以颠倒（在#maindiv 内）。

  • #blue相对于 定位#page，而不是按标题后面的逻辑流#red定位，因为我要求定位其#green兄弟：顶部#green 必须保持从#page.

    我已经实现了这一点（正确或错误），方法是相对于实现其水平位置#green的白边div 进行定位，然后绝对定位在其中以实现固定的垂直位置。#main#main#page

    这当然会影响 的位置#blue。我只是不确定是否有办法将这个 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 回答