javascript - 一个 div 正在扩展页面的宽度

Question

我有一个单页网站。它基本上是一个部分列表。其中一个部分有一个按钮，单击该按钮会覆盖一个对话框。该对话框最终扩大了页面的宽度，并引入了横向滚动条。

这真的破坏了外观，我希望对话框不会展开页面。

作为引用，它与这里的布局相同:

http://www.polymer-project.org/components/core-animated-pages/demos/music.html

我尝试在有问题的部分设置 max-width: 100% 和 overflow-x: hidden 但无济于事。

这是有问题的部分的标记:

<section id="music-section">
    <div class="music-container">
        <h1> About Us </h1>
        <h2> The following is our mission statement on campus. </h2>

        <div class="music-row">
            <music-demo></music-demo>
        </div>

        <div class="music-row">
            <music-demo-duplicate></music-demo-duplicate>
        </div>
    </div>
</section>

还有 CSS:

.music-row {
    width: 100%;
    height: 330px;
}

.music-container {
    background: rgb(236, 183, 9);
    padding-top: 1%;
    max-width: 100%;
}

Answer 1

您是否在您的 div 中使用“position:absolute”？ 您的元素不会与您的 div 位置对齐:绝对，其他原因可能是 div 的大小，在值宽度和高度中使用 %。