响应式设计中的固定宽度侧边栏无法正常工作？

Question

由于未知原因，它无法正常工作..

我使用此代码作为示例：

<div id="wrap">
    <div id="header">Header</div>
    <div id="sidebar">Static LEFT sidebar</div>
    <div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>
    <div id="footer">Footer</div>
</div>

#wrap { margin: 0px; padding: 10px; max-width:1000px; min-width:500px; margin: 0 auto;}

#header {background: #0f0;}

#sidebar {width: 200px; float: left; height: 200px; background: #ddd;}

#content {margin-left: 210px; min-height: 100px; background: #ddd;}

#footer {clear:both; background: #0f0;}

jsfiddle example（这应该怎么做）

在那里你可以看到侧边栏完全在下面？为什么？

出了什么问题？

谢谢

Answer 1

如果粘贴了副本，您的代码将无效，请尝试此操作

<div id="wrap">
    <div id="header">Header</div>
    <div id="sidebar">Static LEFT sidebar</div>
    <div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>
   <div> <!--closed div here-->

<style type="text/css"> <!--added style tag-->
#wrap { margin: 0px; padding: 10px; max-width:1000px; min-width:500px; margin: 0 auto;}

#header {background: #0f0;}

#sidebar {width: 200px; float: left; height: 200px; background: #ddd;}

#content {margin-left: 210px; min-height: 100px; background: #ddd;}

#footer {clear:both; background: #0f0;}
</style>

编辑：我不应该这样做，但这里有一个适合你的代码

#page-body-inner {

  padding: 0 5px 0 0;
  float: left;
  width: 80%;
}

#sidebar{
    float: left;
    width: 20%;
    box-sizing: border-box;
}

将你自己的css代码添加到各自的id中，上面的代码将使你的div并排

Answer 2

CSS中存在三个问题：

1. 您已为margin-right: 260px; div指定了#page-body-inner。摆脱它。

2. 您需要将float: left;添加到#page-body-inner div。

3. 最后，#page-body-inner div的宽度太大，因此侧栏和div不能放在一行中。尽量减小宽度。

Answer 3

你基本上不能指望你的侧边栏会从右侧浮动主容器盒，如果你定义了margin-right：265px;为您的主要容器。这意味着这个区域已被主要容器占用，并且不可能将侧边栏放在那里。

您应该尝试为两个块设置正确的宽度，而不是这样做。 例如：

    #page-body-inner {
        float: left;
        width: calc(100% - 260px);
        margin-right: 0;
    }

    #sidebar {
        float: left;
    }

Answer 4

delate margin-right：260px，属于div whitch id是page-body-inner