Question

如果需要，我可以提供更具体的代码，但这个基本代码应该证明我的问题。基本上，当窗口最大化时，我的页面看起来很棒（最小宽度+左边+右边距）。但是当你最小化窗口时，右边距会消失。

我们的想法是拥有一个始终在内容周围保留特定页面边距的正文。然后让内容始终居中。

以下代码。我简化了我的实现以突出我的问题。

<style>
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body style="margin: 10px 20px 5px 20px;">
    <div class="panel">
    ....my content
    </div>
</body>

Answer 1

您需要使用'display：inline-block;'

http://jsfiddle.net/CunsN/

<body style="display:inline-block;margin: 10px 20px 5px 20px;">
  <div class="panel">
  ....my content
  </div>
</body>

Answer 2

尝试固定位置并忘记内联样式

<style>
body{
   position:fixed;
   top 10px;
   right:20px;
   bottom:5px;
   left:20px;
   display:block;
}
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body>
    <div class="panel">
    ....my content
    </div>
</body>

Answer 3

这是我最终使用的解决方案。

<style>
    body{
      background-color: #F5F5F5;
      min-width: 1020px;
      margin-top: 10px;
      margin-bottom: 5px;
    }
   .panel{
      background-color: #FFFFFF;
      position: relative;
      margin: 0px 20px 15px 20px
    }
</style>

<body>
    <div class="panel">
       ....my content
    </div>
</body>

感谢您的所有建议。

最小化窗口时右边距丢失

3 个答案: