Css 控制div'；s宽度

你好，我正在尝试建立一个流动的设计，不知道为什么，但我不能得到的东西工作。因此，如果调整窗口的大小以调整div菜单的大小，而不是将div强制到主题中的其他元素上

下面是我目前用于CSS的代码

#stats-panel { 
  position: fixed;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: #ffffff;
  background-image: none;
  background-origin: padding-box;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: auto;
  border: 2px solid #ffffff;
  min-width: 680px;
  max-width: 980px;
  width: 100%;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 420px;
  margin-top: 0px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  top: 58px;
  left: 0px;
  right: auto;
}

---

当我跨过这个div与其他div冲突的最大宽度时，我能做些什么来保持两个元素之间的20px的边距，但仍然允许在调整窗口大小时调整这个div（统计面板）的大小。

这个站点有很多流体CSS布局的好例子：

答案可能在于与其他元素的关系。因为这个div有一个

位置：fixed

，所以它从常规流中取出，很像绝对流。它的位置相对于浏览器窗口，与其他元素的任何关系都是无关的

---

您必须在某种程度上模拟此div与其他元素的关系行为，以便它们开始移动。有几种方法可以做到这一点，这取决于您当前的布局。

不太确定您的网页的整个布局是什么，但是假设我们看到的是一个包含主体div和边栏div的两列布局，那么您可能可以这样做：

首先，在html文档中：

<div id="wrapper">

    <div id="main">
        <h2>This is the main body</h2>
    </div>

    <div id="sidebar">
       <h2>This is the sidebar</h2>
    </div>

</div>

这里的基本思想是首先为包装器设置范围宽度，而不是死值。接下来，决定哪列具有固定宽度，哪列具有流体宽度。对于流体柱（在本例中为#主div），不要设置固定宽度；相反，设置一个边距将其推到其位置。这样做将在固定柱和液柱之间保持固定的“填充”。在我的示例中，无论浏览器如何调整大小，这个“填充”都将保持在30px左右。固定列将保持在250px，流体列的“填充”为30px，而流体列将根据浏览器窗口的大小依次具有“可变”宽度

---

希望这有帮助；）

像素大小是否是一个要求（可以切换到em而不是px）？不，只是出于某种原因，我更习惯于px而不是em，但（px）不是必需的

#wrapper{
    padding:0;
    margin:0 auto;
    min-width:940px;
    max-width:1280px;
}

    #main{
        margin-left:0;
        margin-right:280px;
    }

    #sidebar{
        float:right;
        width:250px;
    }