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（stats-panel）的大小。 / p>

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左右。固定柱将保持在250px，流体柱的“填充”为30px，流体柱将具有“可变”宽度，具体取决于浏览器窗口大小。

希望这会有所帮助;）

Answer 2

这个网站有许多流畅的CSS布局的好例子：http://www.glish.com/css/index.html

Answer 3

答案可能在于与其他元素的关系。由于这个div有一个position:fixed，它被从常规流中取出，就像绝对一样。它的位置是相对于浏览器窗口的，与其他元素的任何关系都无关紧要。

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

控制div的宽度

3 个答案: