有CSS溢出问题：隐藏 [英] Having issues with CSS overflow:hidden

问题描述

我有一些脚本似乎运行良好的功能明智：

HTML：

 < div class =navigation1> icon首页< / div> 
< div class =dropdown> 
< div class =items>图标默认值1< / div> 
< div class =items>图标报告1< / div> 
< div class =items> icon其他1< / div> 
< / div> 
   

CSS ：

  .menu {
 margin：auto; 
 / * overflow：hidden; * / 
 position：relative; 
 background：#CCCCCC; 
} 
  

视觉上，一切都错了。从此jsFiddle 中可以看到，菜单和页脚似乎布局不正确。当我取消注释 / * overflow：hidden; * / ，看起来很完美，但是 .dropdown 隐藏在 .footer 后面。

如何让它看起来更直观， ？。 css属性

。

  .menu ：after {
 clear：both; 
 content：; 
 display：block; 
 overflow：hidden; 
} 
  

现场演示

-

或这里的第二个选项

HTML

 < br /> 
< div class =header> header< / div> 
< div class =menu> 
< div class =navigation1> icon首页< / div> 
< div class =dropdown> 
< div class =items>图标默认值1< / div> 
< div class =items>图标报告1< / div> 
< div class =items> icon其他1< / div> 
< / div> 
< div class =navigation2> icon首页< / div> 
< div class =dropdown drop2> 
< div class =items>图标默认值2< / div> 
< div class =items>图标报告2< / div> 
< div class =items> icon其他2< / div> 
< / div> 
< div class =clr>< / div> // add this line here 
 
< / div> 
< div class =footer> footer< / div> 
  

Css

  .clr {
 clear：both; 
} 
  

现场演示

I have some script which seems to work perfectly functionality wise:

HTML:

<div class="navigation1">icon Home</div>
<div class="dropdown">
    <div class="items">icon Default 1</div>
    <div class="items">icon Reports 1</div>
    <div class="items">icon Other 1</div>
</div>

CSS:

.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

Visually though, it all goes wrong. As you can see from this jsFiddle, the menu and the footer seem to be laid out incorrectly. When I uncomment /*overflow:hidden;*/, visually it looks perfect, but the .dropdown seems to get hidden behind the .footer.

How do i get this to look right visually and get it to function correctly too?

解决方案

Now define your .menu:after some css properties

as like this

.menu:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

Live Demo

---------

Or 2nd option here

HTML

<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>  // add this line here 

</div>
<div class="footer">footer</div>

Css

.clr{
clear:both;
}

Live Demo

这篇关于有CSS溢出问题：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！