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

沒有什麼特別的問題。阿門！ –