Question

我无法让我的.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%);
}
*/

Answer 1

我认为你的div.nav.wrap被推倒了，因为它已经浮起来，容器中没有它的空间，因为它漂浮在容器上没有调整它。如果您移除浮动，您将看到容器开始包含它。这种正常的浮动行为 - 具有浮动的元素不属于＆＃39;流程＆＃39;该文件因此其他元素不受其影响。

我只是添加一个负的上边距来推回它。我通常会做这个，或者取决于你如何调整导航高度。因此，您现有的.nav.wrap规则将成为：

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

容器不会包含所有内容

1 个答案: