0
如何浮動一個div下絕對定位的div下的3周主要的div（的jsfiddle內部）
/* 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，（#feature，#images，＃推薦），當瀏覽器收縮到1280像素以下時完美浮動。但是，擴展後，#comments div僅在#images div下浮動，因爲其他兩個div絕對定位。我明白爲什麼這樣做，我只是不知道如何解決它。當瀏覽器大於1280像素時，如何浮動#comments div，同時仍然保留所有3個div填充屏幕時的特性，當中間div（#images）伸縮時最大化？
我可以通過CSS獲得CSS的一面嗎？ – dudewad
增加了CSS。如果你按照這個鏈接（http://jsfiddle.net/B95BX/），你可以看到所有的實時輸出，所以你確切地知道我在說什麼。謝謝！ – user2441996