Question

我有两个div：一个具有固定宽度的左边（#Sidebar）和一个填充剩余空间（#Content）的div。现在，当我调整视口大小时，我希望左侧div（#Sidebar）在右侧（#Content）下移动。

请注意，在我的实际情况中，补充工具栏和内容区都具有动态高度。

这是我目前的代码：

HTML：

 <div id="sidebar"></div>
 <div id="content"></div>

CSS：

 #sidebar { 
 float: left; 
 background: #CCC; height: 100px;width: 100px;}

 #content {
 margin-left: 110px;
 background: #111; height: 100px;}

 @media screen and (max-width: 500px){
 #content {
 width: 100%; 
 margin-left: 0px;
 clear: both;
 }}

在此处观看：http://jsfiddle.net/faz88ayh/ =＆GT;左边的Div（#Sidebar）将始终位于顶部。

我想要的效果可以用bootstrap实现，但它不支持固定和流体宽度列的组合。 =＆GT; http://jsfiddle.net/faz88ayh/1/ （您必须调整结果窗口的大小才能看到效果）

请帮忙！

Answer 1

小提琴中定义的css变化

#sidebar {
float: left;
background: #CCC;
height: 100px;
width: 100%
}
#content {
background: #111;
height: 100px;
width:100%;
}

http://jsfiddle.net/faz88ayh/15/

Answer 2

[在你的要求的小提琴中有另一个答案]

#sidebar {
background: #CCC;
height: 100px;
width: 100px;
position: absolute;
left: 25%;
z-index: 99;/*float:left;
*/
}
#content {
background: #111;
height: 100px;
}
@media screen and (max-width: 600px) {
#sidebar {
left: 0;
top: 0;
}
}
@media screen and (max-width: 533px) {
#sidebar {
left: 0;
top: 0;
}
}

http://jsfiddle.net/faz88ayh/16/

Answer 3

只有小屏幕尺寸的

#sidebar {
float: left;
background: #CCC;
height: 100px;
width: 100px;
}
#content {
margin-left: 110px;
background: #111;
height: 100px;
}
@media screen and (max-width: 600px) {
#sidebar {
left: 18%;
top: 0;
position:absolute;
}
}
@media screen and (max-width: 533px) {
#sidebar {
left: 21%;
top: 0;
}
}
@media screen and (max-width: 480px) {
#sidebar {
left: 23%;
top: 0;
}
}

左边的Div应该在右边的Div下移动

3 个答案: