Question

在一天中的大部分时间里，我一直在为自己创建一个网站，以了解并启用反应式导航栏，但是现在我想添加更多似乎错过了一些内容的内容。调整大小后，导航菜单都可以正常工作，并且我已经在手机上对其进行了检查。现在的问题是我添加的下一个div不会出现在导航栏下方，而是在其后面，就像导航栏div（标题）的高度值为0。

该网站处于启用状态，因此我可以在手机上对其进行检查。 cscustomsbikes.co.uk

我相当确定这对有经验的人来说是一个简单的解决方法，但是我很努力。

我尝试将标头div高度设置为auto，但这没有用。我可以在其中添加一个固定的高度，并且效果很好，但是当页面缩小到移动尺寸时，弹出菜单会在pageinfo div上展开，而不是向下推...，因为它固定了。

源代码：

$(function(){
  $('#menu').slicknav();
});

    @charset "utf-8";
    /* CSS Document */
    
    .body {
    	max-width: 1200px;
    	height: auto;
    	margin-left: auto;
    	margin-right: auto;
    	padding-left: 10px;
    	padding-right: 10px;
    	}
    
    .header{
    	height:inherit;
    }
    	
    .logo {
    	float:left;
    	width: 200px;
    	height:auto;
    	display: block;
    	}
    	
    .Navlinks{
    		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu 
    Sans Condensed", Helvetica, Arial, "sans-serif";
    		font-size: 18px;
    		font-style: normal;
    		text-decoration: underline;
    		color:#B0AAAA;
    }
    
    ul.menu{
    	margin:0;
    	padding-top:0px;
    }
    
    .pageinfo {
    	border-color: #000000;
    	border-top:3px;
    	border-bottom: 3px;
    	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    	background-color: #FB070B
    }
    
    
    
    	/*Global view*/
    @media(min-width:769px){
    
    
    ul.menu{
    	padding-top:20px;
    }
    
    ul.menu li{
    	height:auto;
    display:block;
    float:right;
    padding-left:20px;
    }
    
    	.slicknav_menu{
    		display:none;
    	}
    	
    }
    
    	/*Tablet View*/
    @media (max-width: 768px){
    	
    	
    .logo {
    		width: 170px;
    	}
    	
    ul.menu{
    		float: right;
    		list-style-type:none;	
    	}
    
    ul.menu li{
    		margin-bottom: 5px;
    	}
    	
    .Navlinks {
    	font-size: 14px;
    	}
    	
    .slicknav_menu{
    		display:none;
    	}
    	
    }
    
    
    	/*Mobile View*/
    @media (max-width: 400px){
    		
    .header {
    		height:auto;
    		float: left;
    	}
    	
    .logo {
    		width: 100px;
    	float:left;
    	}
    	
    #menu{
    		display: none;
    	}
    	
    .slicknav_menu{
    	height: auto;
    	display:block;
    	float: right;
    	}
    	
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>

<div id="pagebody" class="body"> </div>

<div id="header" class="header"> 
  <img src="Resources/Logos/Logo.gif" alt="C.S.Customs logo" class="logo" id="logo">
  <ul class="menu" id="menu">
    <li>
      <a class="Navlinks" href="contact.html">Contact Us</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Gallery</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Services</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">About Us</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Home</a>
    </li>
  </ul>
</div>

<div id="pageinfo" class="pageinfo">Main editable region</div>

这最终将成为我的网站模板，而pageinfo将成为可编辑区域。

谢谢。

Answer 1

无论何时浮动元素（适合您的li），该元素的父div（ul.menu）都不关心其位置，并停止扩展其大小以包含浮动的子元素。您正在寻找的解决方案称为 clearfix 。请参阅以下SO问题：What methods of ‘clearfix’ can I use?进行实施。

有关浮动元素及其含义的更多信息，例如，您可以参考CSS Tricks，尤其是“大崩溃”部分。

Answer 2

问题是您的li有float: right。

您需要先清除，然后再将其悬停在内容上。

尝试在关闭标题的<div style="clear: both;"></div>之前添加</div>。

noob div标签问题-自动调整大小和位置

2 个答案: