0 

/* structure */

body {
    margin:0;
    padding:0;
    }
#break {
    clear:both;
    }

/* header */

header {
    padding:15px;
    background:silver;
    }
#avatar {
    float:right;
    }
#brand {
    float:left;
    }

/* nav */

nav {
    clear:both;
    }
#menu1 ul {
    margin:0;
    padding:0;
    }
#menu1 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }
#menu2 {
    clear:both;
    float:left;
    margin:1px 0 0 0;
    }
#menu2 ul {
    margin:0;
    padding:0;
    }
#menu2 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }

/* main */

#commentswrapper {
    clear:both;
    }
#comments {
    clear:both;
    background:grey;
    }
#feature {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    background:lime;
    }
#images {
    position:relative;
    margin:0 300px 0 600px;
    background:cyan;
    }
#recommend {
    position:absolute;
    top:0;
    right:0;
    width:300px;
    background:red;
    }
#main {
    position:relative;
    }
#mainwrapper {
    clear:both;
    position:relative;
    }
#title {
    clear:both;
    background:brown;
    }


@media screen and (max-width:1280px){

/* structure */

body {
    margin:0;
    padding:0;
    }
#break {
    clear:both;
    }

/* header */

header {
    padding:15px;
    background:silver;
    }
#avatar {
    float:right;
    }
#brand {
    float:left;
    }

/* nav */

nav {
    clear:both;
    }
#menu1 ul {
    margin:0;
    padding:0;
    }
#menu1 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }
#menu2 {
    clear:both;
    float:left;
    margin:1px 0 0 0;
    }
#menu2 ul {
    margin:0;
    padding:0;
    }
#menu2 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }

/* main */

#comments {
    clear:both;
    background:grey;
    }
#feature {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    background:lime;
    }
#images {
    margin:0 0 0 600px;
    }
#recommend {
    clear:both;
    float:left;
    position:relative;
    margin:0;
    width:100%;
    background:red;
    }
#main {
    position:relative;
    }
#mainwrapper {
    clear:both;
    float:left;
    position:relative;
    }
#title {
    clear:both;
    background:brown;
    }
}

<body>
    <header>
        <div id="brand">logo</div>
        <div id="avatar">avatar</div>
        <div id="break"></div>
    </header>
    <nav>
        <div id="menu1">
            <ul>
                <a href=""><li>nav1</li></a>
                <a href=""><li>nav2</li></a>
                <a href=""><li>nav3</li></a>
                <a href=""><li>nav4</li></a>
            </ul>
        </div>
        <div id="menu2">
            <ul>
                <a href=""><li>nav1</li></a>
                <a href=""><li>nav2</li></a>
                <a href=""><li>nav3</li></a>
                <a href=""><li>nav4</li></a>
            </ul>
        </div>
    </nav>
    <div id="title">
        title
    </div>
    <div id="mainwrapper">
        <div id="main">
            <div id="feature">
                111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
            </div>
            <div id="images">
                222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
            </div>
            <div id="recommend">
                333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
            </div>
        </div>
    </div>
    <div id="commentswrapper">
        <div id="comments">
            comments
        </div>
    </div>
</body>

http://jsfiddle.net/B95BX/

#comments div，在 3 个主要 div（#feature、#images、#recommend）下，当浏览器收缩到小于 1280 像素时完美浮动。但是，展开后，#comments div 仅在 #images div 下浮动，因为其他 2 个 div 是绝对定位的。我明白它为什么会这样做，我只是不知道如何解决它。如何在浏览器大于 1280 像素时浮动#comments div，同时在中间 div (#images) 可拉伸的情况下仍保留填充屏幕的所有 3 个 div 的特性？

4

1 回答 1

0

抱歉，您不能在绝对定位的 div 下浮动任何东西。

绝对定位的元素从文档流中取出，这意味着它们不再影响页面上其他元素的流。

如果您确定定位元素的高度，则可以通过相对定位或使用它的 margin-top 样式将评论元素放置在其下方。

否则，您将不得不使用 javascript 解决方案来计算绝对定位元素的高度，并使用它来将另一个元素移动到所需位置。

于 2013-06-03T18:51:58.197 回答