HTML5/CSS：如何防止在div中堆叠？

我想这已经在某个主题中出现了，但我找不到我正在寻找的答案。 我的标题如下所示：

@media (max-width: 1000px) {
    #right-div {
       display: none;
    }
}

其代码如下：

<header>
    <section id="login">
        @Html.Partial("_LoginPartial")
    </section>
    <div class="content-wrapper">
        <div class="float-left" id="image-maintitle">
            <img src="~/Images/DirecTV.jpg" width="70" height="43" />
            <div id="main-title">
                <h1 class="site-title">@Html.ActionLink("Disponibilidad de Señal", "Index", "Home")</h1>
            </div>
        </div>
        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li>
                        <a href="@System.Web.Configuration.WebConfigurationManager.AppSettings["SPDCSSUrl"]" target="_blank">Ir a sistema de monitoreo</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

当滚动条的容器宽度达到1000px时，我想将右div隐藏在滚动条后面。

---

有没有其他方法可以防止这种行为

只需将媒体查询设置为“right div”，如下所示：

@media (max-width: 1000px) {
    #right-div {
       display: none;
    }
}

---

只有当屏幕分辨率宽度大于1000px时，才会显示右div。

您是否尝试了

最大宽度

而不是

最小宽度

min width

指定当窗口小于或等于某个大小时要显示的内容，而

max width

指定当窗口小于或等于某个大小时要显示的内容。您可能需要正确设置CSS显示属性

尝试

显示：内联块或<代码>显示：块

同时设置
最大宽度：1000px在右div中

要执行此操作，请使用

看到Css后编辑：尝试更改宽度以适应您的设置

.float-left {
float: left;
position:relative;
width:80%;
}

.float-right {
    float: right;
    position:relative;
    width:20%;
}

这是一个极好的回答！但是我不认为元素需要通过滚动页面来显示（错误是我的），因为它是指向另一个页面的链接。您知道如何防止堆叠而不使“消失”此元素吗？（对我的错误表示抱歉）将两个内部div设置为“宽度：50%”把它们都浮起来。然而，考虑到两个div中都有相当多的文本，在小屏幕上可能看起来很有趣。问题是页面不需要设置最大宽度，因为它必须以不同的分辨率生长，这就是我没有尝试的原因。@MauroBilotti在这种情况下，我会将div设置为默认隐藏，然后仅在
min width
案例中显示为800px或以上。谢谢Tyler，但右侧div是指向另一页的链接，我无法隐藏它，当我指“隐藏”时，我想说“隐藏在卷轴后面”，因此，当用户需要单击此链接时，他必须将滚动条移到右侧…您明白吗？@Maurobiloti因此您希望容器div具有固定的长度，而站点的其余部分将响应并调整大小以匹配浏览器窗口？@Maurobiloti在这种情况下，我会在使用新媒体查询的每个断点处为这个div设置不同的固定属性值。因此，对于1000px或更大的，您可以将其设置为现在的方式，对于1000px和768px之间的，您可以将其设置为更小的固定长度。对于768px和480px之间的宽度，可以将其设置为更小的固定长度。我会先从最小的分辨率开始，然后再建立，除非你知道你的目标受众主要是基于桌面的。这不起作用：（.元素仍然在堆叠…无论如何，谢谢！你可能还需要将右侧的div浮动到右侧，否则div将位于第一个div的旁边（如果太大，则位于下方）。“浮动到右侧”这个类只指定了一个“float:right；”嗯，看起来问题可能是当一行太大时，你试图在一行上放得太多。试着减少每行的宽度和最大宽度，直到它们彼此相邻。由于不知道css设置的其余部分，恐怕很难帮助你测试这一行。position属性设置为什么？它是bes这是一个例子，在这个问题变得非常基本之前，我是如何处理这个问题的，希望能有所帮助