容器不会包含任何东西

我无法让我的.container{}包含我网页上的所有内容。我较低的导航按钮位于容器外部（用1px黑色边框标记），我无法弄清楚原因。我不确定我的CSS或HTML代码出错了。在此先感谢您的帮助。这里是一个链接到我的CodePen：https://codepen.io/IDCoder/pen/rGWeEE?editors=0100 容器不会包含任何东西

这里是我的代码片段：

<html> 
    <head> 
    <title>Ms.Jane Equities Management Corp</title> 
    </head> 
     <body> 
     <div class="container-fluid"> 

      <!-- Top Box --> 
      <div class="wrap">   
      <div class="Logos"> 
       <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> 
       <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/>      </div>  
      <div class ="nav wrap"> 
      <!--navigation buttons-->      
        <ul class="navigation"> 
        <li id="NAV-ONE"><a href="#">LOG IN</a></li> 
        <li id="NAV-TWO"><a href="#">BUY A HOME</a></li> 
        <li id="NAV-THREE"><a href="#">SELL A HOME</a></li> 
        <li id="NAV-FOUR"><a href="#">CONTACT US</a></li> 
       </ul>   
      </div> 
     </div> 

      <!-- Middle Box --> 
      <div class="row two"> 
      <div> 
       <div class="floater box"> 
       <!--<div class="search box wrap"> 
       <div class="search"> 
     <input type="text" class="searchTerm" placeholder="What are you looking for?"> 
     <button type="submit" class="searchButton"> 
     <i class="fa fa-search"></i> 
    </button> 

       </div> 
       </div>--> 
      </div> 
      </div> 
     </div> 

      <!-- Bottom Box --> 
      <div class="row three"> 
      <div class ="nav wrap 2"> 
       <!--navigation buttons-->      
        <ul class="navigation"> 
         <li id="NAV-A"><a href="#">MY LISTINGS</a></li> 
         <li id="NAV-B"><a href="#">COMMUNITIES SERVED</a></li> 
         <li id="NAV-C"><a href="#">PROPERTIES</a></li> 
        </ul>  
      </div> 
      </div> 
      </div> 
     </body> 
<html>

CSS：

.container-fluid{ 
border: 1px solid #000000; 
max-width: 1600px; 
/*overflow: hidden;*/ 
} 

.wrap{ 
background-color: yellow; 
display: inline: flex; 
/*overflow: hidden;*/ 
} 


.Logos{ 
    width: 55%; 
    display: inline-block; 
    background-color: blue; 

} 


.nav.wrap{ 
    display: inline-block; 
    background-color: green; 
    float: right; 
    margin-top: 25px; 
} 


ul.navigation{ 
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 

/*text-align center;*/ 
/*border: 1px solid green;*/ 
/*overflow: hidden;*/ 
} 


.navigation li { 
    display: inline-block; 

} 

.navigation a { 
    background: #395870; 
    background: linear-gradient(#49708f, #293f50); 
    border-right: 1px solid rgba(0, 0, 0, .3); 
    color: #fff; 
    padding: 12px 20px; 
    text-decoration: none; 
} 
.navigation a:hover { 
    background: #314b0; 
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); 
} 
.navigation li:first-child a { 
    border-radius: 4px 0 0 4px; 
} 
.navigation li:last-child a { 
    border-right: 0; 
    border-radius: 0 4px 4px 0; 
} 



.row.two{ 
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg); 
    background-position: absolute; 
    background-size:cover; 
    background-repeat: no-repeat; 
    max-width: 1600px; 
    height: 550px; 
     margin: auto; 
} 

.floater.box{ 
    background-color: white; 
    border-radius: 10px; 
    opacity: .45; 
    max-width: 75%; 
    height: 200px; 
    position: absolute; 
    top:50%; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

/*.search { 
    width: 50%; 
    position: relative 
} 

.searchTerm { 
    float: left; 
    width: 100%; 
    border: 3px solid #00B4CC; 
    padding: 5px; 
    height: 20px; 
    border-radius: 5px; 
    outline: none; 
    color: #9DBFAF; 
} 

.searchTerm:focus{ 
    color: #00B4CC; 
} 

.searchButton { 
    position: absolute; 
    right: -50px; 
    width: 40px; 
    height: 36px; 
    border: 1px solid #00B4CC; 
    background: #00B4CC; 
    text-align: center; 
    color: #fff; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 20px; 
} 

.search.box.wrap{ 
    width: 30%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
*/

来源

2017-10-05 codebwoy

那究竟是什么问题？你想让.container-fluid占据整个页面，或者.container的位置。 –

我觉得你div.nav.wrap被越来越推下来，因为它是自由浮动，有没有房因为它在容器中，并且因为它被漂浮了，所以容器不会调整它。如果你删除浮动，你会看到容器开始包含它。这是正常的浮动行为 - 具有浮动的元素超出文档的“流”，因此其他元素不受其影响。

我只是添加一个负的顶部边距来推回它。我通常会在对象中进行此操作，或者取决于您如何调整导航高度。因此，您现有的.nav.wrap规则将变为：

.nav.wrap{ 
    display: inline-block; 
    background-color: green; 
    float: right; 
    margin-top: -35px; 
}

来源

2017-10-05 02:17:15 wunth

感谢您的帮助。我通过取出float来工作：right ....这是我当前的代码： .nav.wrap.two display：inline-block; text-align：center; 宽度：100％; margin-top：10px; } – codebwoy

容器不会包含任何东西

回答

相关问题