最小化窗口时右边距丢失答案

【问题标题】：Right margin lost when minimizing window最小化窗口时右边距丢失
【发布时间】：2014-08-04 11:14:51
【问题描述】：

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

这个想法是让正文始终保持围绕内容的特定页边距。然后让内容始终居中。

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

<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>

【问题讨论】：

我最终以另一种方式解决了我的问题。以下是我最终使用的解决方案。

标签： html css margin minimize

【解决方案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>

【讨论】：

这似乎有效。谢谢！不过，我仍然需要检查其他一些事情。

【解决方案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>

【讨论】：

谢谢，但设置一个固定位置需要我更改其余元素的一些位置和样式。虽然我会尝试一下，看看它在生产中是如何工作的。谢谢。

【解决方案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>

感谢您的所有建议。

【讨论】：