0
Как плавать DIV под абсолютным позиционированием 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>
В ДИВ, # комментарий под 3 основных дивы (#feature, #images, # рекомендуется), отлично плавает, когда браузер сокращается до менее 1280 пикселей. Однако расширенный, #comments div только плавает под div #images, потому что 2 других divs расположены абсолютно. Я понимаю, почему это так, я просто не знаю, как обойти это. Как я могу плавать div #comments, когда браузер больше 1280px, сохраняя при этом все 3 divs, заполняющих экран, когда максимальный размер растягивается с помощью среднего div (#images)?
Могу ли я получить сторону CSS с этим? – dudewad
CSS добавлен. Если вы следуете этой ссылке (http://jsfiddle.net/B95BX/), вы можете увидеть все это с живым выходом, чтобы вы точно знали, о чем я говорю. Благодаря! – user2441996