css - 控制div的宽度

Question

您好，我正在尝试构建一个流畅的设计，不知道为什么，但我无法开始工作。因此，如果调整窗口大小以调整 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(统计面板)随着窗口大小的调整而调整大小。

Answer 1

不太确定您的网页的整个布局是什么，但假设我们正在查看具有主体 div 和侧边栏 div 的 2 列布局，那么您可能可以这样做:

首先在您的 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>

接着是 CSS:

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

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

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

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

希望这有帮助；)