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

我想这是已经在一些话题，但我找不到我正在寻找的答案。我有一个头，看起来像这样：HTML5/CSS：如何防止在div内堆叠？

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>

的问题是，无论是DIV的堆叠，当我到达850像素的宽度，就像你可以在此图像中看到：

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

我想在它的容器宽度达到1000像素的隐藏滚动条右后方股利。

是否有另一种方法来防止这种行为？

来源

2014-02-24 Mauro Bilotti

只需设置一个媒体查询为“右格”，像这样：

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

这将只显示正确的div时屏幕分辨率>宽1000像素。

来源

2014-02-24 14:08:04

这是一个极好的回答！但我不会认为该元素需要通过滚动页面来显示（错误是我的），因为它是另一个页面的链接。你知道如何防止堆叠而不使这个元素“消失”吗？（对不起，我的错误） –

将两个内部div设置为'宽度：50％;'并将它们浮起来。不过，考虑到你在这两个div中都有一些文本，它可能在小屏幕上看起来很有趣。 –

你试过max-width而不是min-width？ min-width指定了要显示的内容，如果窗口是某个尺寸或更大尺寸，而max-width指定了要显示的内容，如果该窗口的尺寸小于或等于。

来源

2014-02-24 14:09:12 TylerH

问题是，页面不需要有最大宽度设置，因为它必须以不同的分辨率长大，这就是为什么我没有尝试过。 –

@MauroBilotti在这种情况下，我会将div设置为默认隐藏，然后仅显示在** 800px **或以上的'min-width'个案中。 – TylerH

感谢泰勒，但正确的div是一个链接到另一个页面，我不能隐藏它，当我的意思是“隐藏”我想说“躲在滚动后面”，所以当用户需要点击此链接时，他必须将滚动条移动到右边......你明白吗？ –

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

尝试display:inline-block;或display:block;在每个元素的CSS。

还设置max-width:1000px;在正确的div

做这个在线使用<div style="display:block">

编辑看到的CSS后：尝试改变宽度，以满足您的设置

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

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

来源

2014-02-24 14:15:39 CRiv

它不起作用:(。仍然元素堆叠...谢谢无论如何！ –

您可能还需要将正确的div浮动到右边，否则div将坐在旁边（或者如果它太大）第一个一个 – CRiv

这个“float-right”类就是这样做的！这个类只指定了一个“float：right;”属性 –

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

回答

相关问题