左 Div 应该在右 Div 下移动答案

【问题标题】：Left Div should move under the right Div左 Div 应该在右 Div 下移动
【发布时间】：2015-03-01 00:07:46
【问题描述】：

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

请注意，在我的真实场景中，侧边栏和内容 div 都具有动态高度。

这是我当前的代码：

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/ => 左侧的 Div (#Sidebar) 将始终保持在顶部。

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

请帮忙！

【问题讨论】：

你应该使用position:absolute;。
@ketan 你能告诉我我的小提琴 (jsfiddle.net/faz88ayh) position:absolute 如何完成这项工作吗？谢谢 :) PS：#Content 和#Sidebar 在实际场景中不是固定高度的。

标签： html css twitter-bootstrap

【解决方案1】：

在 fiddle 中定义的 css 变化

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

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

【讨论】：

但是左侧 div (#Sidebar) 不会在 Fiddle 中的 #content 下移动，并且侧边栏必须是固定宽度。
是的，完全正确。但仅当屏幕尺寸较小时。（侧边栏中没有导航，只有小部件，在内容顶部看起来很丑）。

【解决方案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/

【讨论】：

两个 Fiddles 都可以完成这项工作，但是必须通过添加：“left: 0%”来删除继承的“left: 25%”属性（来自 bootstrap.css）。 => jsfiddle.net/faz88ayh/23

【解决方案3】：

您的 css 仅适用于小屏幕尺寸

#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;
}
}

【讨论】：