容器不会包含任何东西
问题描述:
我无法让我的.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%);
}
*/
答
我觉得你div.nav.wrap
被越来越推下来,因为它是*浮动,有没有房因为它在容器中,并且因为它被漂浮了,所以容器不会调整它。如果你删除浮动,你会看到容器开始包含它。这是正常的浮动行为 - 具有浮动的元素超出文档的“流”,因此其他元素不受其影响。
我只是添加一个负的顶部边距来推回它。我通常会在对象中进行此操作,或者取决于您如何调整导航高度。因此,您现有的.nav.wrap
规则将变为:
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: -35px;
}
+0
感谢您的帮助。我通过取出float来工作:right ....这是我当前的代码: .nav.wrap.two display:inline-block; text-align:center; 宽度:100%; margin-top:10px; } – codebwoy
那究竟是什么问题?你想让.container-fluid占据整个页面,或者.container的位置。 –