html - Div 模块左右边距在响应式设计中不起作用

Question

我有一个 div 模块，当您单击按钮时会显示该模块。我正在努力实现：

• 当视口超过 786px 时，制作一个最大宽度为 786px 的 div “模块” AND 和 Center div “模块”
• 当视口低于 786 像素时，div“模块”的宽度为 100%，但保留 32 像素左右边距作为呼吸空间

我无法完成后者，我不知道为什么。左边距和右边距没有按预期工作，除了只有左边距应用并将 div“模块”推离屏幕。

.module {
    display: block;
    position: absolute;
    width: 100%;
    max-width: 768px;
    background-color: yellow;
    z-index: 100;
    right: 0;
    left: 0;
    margin: auto;
}

.overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-color: Gray;
}

@media screen and (max-width: 768px) {
  .module {
  margin-left: 32px;
  margin-right: 32px;
  // I assume the value 'auto' this resets the following property
  top: auto;
  left: auto;
 }
}

<div class="content">
  <button>Open Module</button>
</div>

<div class="module"></div>

<div class="overlay"></div>

标签： htmlcsssass

Answer 1

试试这个

.module {
    display: block;
    position: relative;
    max-width: 768px;
    height: 200px;
    background-color: yellow;
    z-index: 100;
    margin: auto;
}

.overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-color: Gray;
}

@media screen and (max-width: 768px) {
  .module {
  margin-left: 32px;
  margin-right: 32px;
  // I assume the value 'auto' this resets the following property
  top: auto;
  left: auto;
 }
}

这是 jsfiddle 示例的链接：

https://jsfiddle.net/LaKhDaR/auewovfr/44/