Question

/* 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）下，当浏览器收缩到小于1280px时完美浮动。但是，扩展后，#comments div仅在#images div下浮动，因为其他2个div绝对定位。我理解为什么会这样做，我只是不知道如何解决它。当浏览器大于1280像素时如何浮动#comments div，同时在保持中间div（#images）伸缩的最大值时仍然保留所有3个div填充屏幕的特征？

Answer 1

对不起，你不能在绝对定位的div下浮动任何东西。

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

如果你肯定知道定位元素的高度，你可以通过相对定位或者用它的边缘顶部样式来放置注释元素。

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

如何在一个绝对定位的div下浮动div（jsfiddle里面）

1 个答案: