Question

我对这个巨大的弹出窗口有点问题。我想左对齐弹出窗口而不是让它显示在屏幕上相对于浏览器的中心位置。知道怎么做吗？我似乎无法找到弹出窗口的相对内容（我已经尝试了几个小时而且我是jQuery的新手）。我已经尝试继承，修复，绝对，每次弹出窗口出现在屏幕的不同区域，如果我缩小。

总结一下，我想复制这个网站：http://www.madridmontessori.org/site_eng.html （然而，它是在Flash中完成的）

我不确定让我玩这些设置是不是一个好主意，但无论如何我都这样做了......对我来说没什么用呢= S

.mfp-container {
  position: absolute;
  width: 1167px;
  height: auto;
  margin-left:auto;
  margin-right:auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color:red; }

至于jQuery代码，我甚至都不会把它放在一边，因为我没有错过任何一行。 = d

以下是一些可能对您有所帮助的试用失败：

<div id="body" style="position:absolute;">
<div id="popup-1" class="zoom-anim-dialog mfp-hide" style="position: relative; top: 30px; left: 50px;">
    <h1>Title here</h1>
    <p>Content here  </p>
</div>

-

#popup-1 {
    background: white;
    padding: 10px 20px;
    text-align: left;
    max-width: 500px;
    top:150px;
    left: 30px;
    position: relative;
}

Answer 1

尝试添加float: left：

#popup-1 {
    background: white;
    padding: 10px 20px;
    text-align: left;
    max-width: 500px;
    top:150px;
    left: 30px;
    position: relative;
    float:left
}

还有：

.mfp-container {
    float:left;
    padding:0!important;
}

左对齐Magnific Popup - 内联到DIV ID

1 个答案: