CSS浮动DIV元素

我相信我有一个非常独特的问题。我正在尝试创建一个菜单，基本上我有一些浮动的div div在主菜单中，在网页顶部持有div。问题是我需要让父元素具有自动高度，因为我希望它是动态的，以防万一我更改菜单按钮（子DIV）上的填充。此外，父级宽度为100％，其内部的子级具有自动宽度并设置了最大宽度，这样我就可以在页面调整大小时将左右子菜单按钮放在一起小。但是，一切正常，直到您将页面调整到左右右侧菜单部分合并为止，然后所有子菜单按钮都需要堆叠，而不是自动为主页面创建垂直滚动条。CSS浮动DIV元素

我不知道这是否会造成问题，因为我打算稍后使用媒体查询来自动切换CSS以实现移动兼容性。不过，我想找到解决这个问题的办法。如果我需要发布我的所有代码以获得正确的答案，请让我知道，我会做。

非常感谢。

哦，顺便说一句，我已经搜索了一个解决方案约一个小时，没有任何工作。我不妨发布下面的代码，因为我真的想找到解决方案。

的HTML：

<body> 
<div id="header" class="clearfix"> 
    <div id="wrapper"> 
     <div id="main-nav" class="float-left"> 
      <ul id="main-nav-menu" class="menu"> 
       <li id="main-menu-button"> 
        <a href="#" data-description="Since 1976"> 
         Pardee Electric 
        </a> 
       </li> 
      </ul> 
     </div> 
     <div id="main-nav" class="float-right"> 
      <ul ud="main-nav-menu" class="menu"> 
       <li id="main-menu-button" class="float-right"> 
        <a href="#"> 
         Get in Touch 
        </a> 
       </li> 
       <li id="main-menu-button" class="float-right"> 
        <a href="#"> 
         Residential 
        </a> 
       </li> 
       <li id="main-menu-button" class="float-right"> 
        <a href="#"> 
         Commercial 
        </a> 
       </li> 
       <li id="main-menu-button" class="float-right"> 
        <a href="#"> 
         Industrial 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
</body>

的CSS：

/* body data */ 

body { 
margin-top: 0px; 
-webkit-font-smoothing: subpixel-antialiased; 
background-color: #F0F0F0; 
} 

ul { 
list-style: disc; 
} 

/* header data */ 

#header { 
width: 100%; 
height: auto; 
background-color: #456DC0; 
border-bottom: 1px solid #FFFFFF; 
} 

#wrapper { 
width: auto; 
max-width: 1024px; 
height: auto; 
background: none; 
margin: 0 auto; 
} 

.clearfix:after { 
content: " "; 
display: block; 
height: 0; 
clear: both; 
margin-top: 0; 
} 

#main-nav-menu { 

} 

#main-nav { 
width: auto; 
height: auto; 
position: relative; 
} 

#main-nav ul, #main-nav .menu { 
margin: 0px; 
} 

#main-nav li { 
width: auto; 
list-style: none; 
margin: 0px; 
position: relative; 
display: inline; 
} 

#main-nav a { 
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 16px; 
padding: 15px 20px 15px 20px; 
position: relative; 
letter-spacing: 0px; 
text-align: center; 
text-decoration: none; 
text-transform: none; 
text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); 
display: block; 
color: #F0F0F0; 
z-index: 98; 
-webkit-transition: background-color .2s ease, border .2s ease, color .4s ease,   opacity .2s ease-in-out; 
background-color: #4186D2; 
} 

#main-nav a:active { 
background-color: #000000; 
} 

#main-nav a:hover { 
background-color: #333333; 
color: #FFFFFF; 
} 

.float-right { 
float: right; 
} 

.float-left { 
float: left; 
}

Demo in Jsfiddle

希望的CSS贴OK。我是Stack新手。

再次感谢！

来源

2014-03-02 Samuel Pardee

你是什么意思的“堆栈，而不是自动创建一个垂直滚动条”。你能更清楚地知道你想要完成什么样的行为吗？ – teh1

我也有点困惑。我想评论一下，你也不应该多使用一次ID。但更重要的是，对于这种情况，如果您没有如此深入的嵌套元素，我认为这会有很大的帮助。完全没有理由让左导航元素嵌套四层深。 – thesublimeobject

没有什么特别的问题。阿门！ –