/* 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>
#comments div，位于 3 个主要 div(#feature、#images、#recommend)下，当浏览器缩小到小于 1280px 时，它会完美地 float 。但是，展开后，#comments div 仅 float 在#images div 下，因为其他 2 个 div 是绝对定位的。我明白为什么要这样做，我只是不知道如何解决它。当浏览器大于 1280 像素时，我如何 float #comments div，同时在中间 div (#images) 可拉伸(stretch)时仍然保留所有 3 个 div 填充屏幕的特性？
最佳答案
抱歉，您不能在绝对定位的 div 下 float 任何内容。
绝对定位元素从文档流中移除，这意味着它们不再影响页面上其他元素的流。
如果您确切知道定位元素的高度，则可以通过相对定位或利用其 margin-top 样式将评论元素放置在其下方。
否则，您将不得不寻求 javascript 解决方案来计算绝对定位元素的高度，并使用它来将其他元素移动到所需位置。
关于css - 如何在绝对定位的 div 下 float 一个 div(里面有 jsfiddle)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16903514/