Question

我想这已经出现在某个主题中，但我找不到我正在寻找的答案。我有一个看起来像这样的标题：

enter image description here

其代码如下：

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

问题是当我达到850px的宽度时，两个div都在堆叠，就像你在这张图片中看到的那样：

enter image description here

我尝试在内容包装器类或“标头”标记中设置最小宽度，但无法正常工作。奇怪的是，当我尝试在浏览器上选择这个div的“检查元素”时，我不能这样做......只有我可以用内部的元素来做。

这是我这个类的CSS文档：

.float-left {
    float: left;
}

.float-right {
    float: right;
}

header, footer, hgroup,
nav, section
{
    display: block;
}

ul#menu
{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 15px 0 0 0;
    text-align: right;
}

.content-wrapper {
    min-width: 1000px !important;
}

我希望在容器达到1000px宽度时隐藏滚动条后面的正确div。

还有其他方法可以防止这种行为吗？

Answer 1

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

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

这将仅在屏幕分辨率为＆gt;时显示正确的div。宽度为1000像素。

Answer 2

您是否尝试过max-width代替min-width？ min-width指定要在窗口特定尺寸或更大时显示的内容，而max-width指定窗口位于确定时要显示的内容大小或更小。

Answer 3

您可能需要正确设置CSS显示属性。

在css中为每个元素尝试display:inline-block;或display:block;。

同时在右侧div中设置max-width:1000px;

执行此内联使用<div style="display:block">

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

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

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

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

3 个答案: