Question

我还在学习html和css，试图弄清楚一切是如何工作的，没有任何编码经验。如果我问一个愚蠢或完全多余的东西，请原谅我。

基本上，我有3个div正在处理。页面顶部有2个div，用于标识。一个在左上角，一个在右上角。我的第三个div，对于导航栏，不会低于它们，而是重叠它们。

我应该只使用<br>来处理它吗？

引用的图片是本地的。有关实时版本，请参阅http://ddlgaming.com/giga/。

提前谢谢！

我的代码如下（请忽略所有颜色，它们让我看得更清楚）：

CSS和HTML：

.clearfix	{
			clear: both;
			}

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#gigalogomainbox
			{
			float: left;
			width: 30vw;
			height: 10vw;
			overflow: hidden;
			transform: skewX(20deg);
			margin: 0 0 0 -4vw;
			}
			
#gigalogobox
			{
			margin: 0 3vw 0 2vw;
			padding: 0 0 0 2vw;
			width: 100%;
			height: 8vw;
			}
	
#gigalogo
			{
			width: 80%;
			margin: 3vw 2vw 0 0;
			height: 7vw;
			}
			
#steamlogomainbox
			{
			width: 15vw;
			height: 10vw;
			float: right;
			margin: 0 -4vw 0 0;
			background-color: white; /*000c21*/
			transform: skewX(-20deg);
			overflow: hidden;
			}
					
#steamlogobox
			{
			margin: 0 -2vw 0 3vw;
			padding: 0;
			width: 100%;
			height: 20%;
			}
#steamlogo
			{
			padding: 0 0 0 2vw;
			margin: 3vw 0vw 0 0;
			transform: skewX(20deg);
			height: 7vw;
			}

#placeholderbartop
			{
			float: left;
			width: 60%;
			margin: 0;
			padding: 0;
			height: 10vw;
			}
			

#navbarbox			
			{
			display: block;
			width: 100%;
			height: 5vw;
			margin: 0vw;
			background-color: white;
			}
#navbar, #navbar ul
			{
			width: 100%;
			height: 5vw;
			margin: 0;
			background-color: green;
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw;
			color: red;
			font-size: 30px;
			}

<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>

<body>


<!--Giga logo, top left--!>
<div id="gigalogomainbox" class="clearfix">
	<div id="gigalogobox">
		<img id="gigalogo"  src="images/gigalogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--Steam logo, top right--!>
<div id="steamlogomainbox">
	<div id="steamlogobox">
		<img id="steamlogo" src="images/steamlogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--navigation barrrrrr--!>
<div id="navbarbox">
	<ul id="navbar">
		<li>Home</li>
		<li>Servers</li>
		<li>Community</li>
		<li>Store</li>
		<li>Download</li>
		<li>Contact</li>
	</ul>
</div>

</body>


</html>

Answer 1

这是因为浮动的元素需要被清除＆＃34;要使块元素显示在它们下面，否则块元素中的内联内容将环绕浮动元素。您可以在CSS中使用.clearfix类。您可以将其应用于#navbarbox，也可以将徽标包装在新元素中，并将.clearfix类应用于该元素。

btw你的html评论语法是错误的。应该是，而不是<!-- comment --!>

＆＃13;

.clearfix	{
			clear: both;
			}

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#gigalogomainbox
			{
			float: left;
			width: 30vw;
			height: 10vw;
			overflow: hidden;
			transform: skewX(20deg);
			margin: 0 0 0 -4vw;
			}
			
#gigalogobox
			{
			margin: 0 3vw 0 2vw;
			padding: 0 0 0 2vw;
			width: 100%;
			height: 8vw;
			}
	
#gigalogo
			{
			width: 80%;
			margin: 3vw 2vw 0 0;
			height: 7vw;
			}
			
#steamlogomainbox
			{
			width: 15vw;
			height: 10vw;
			float: right;
			margin: 0 -4vw 0 0;
			background-color: white; /*000c21*/
			transform: skewX(-20deg);
			overflow: hidden;
			}
					
#steamlogobox
			{
			margin: 0 -2vw 0 3vw;
			padding: 0;
			width: 100%;
			height: 20%;
			}
#steamlogo
			{
			padding: 0 0 0 2vw;
			margin: 3vw 0vw 0 0;
			transform: skewX(20deg);
			height: 7vw;
			}

#placeholderbartop
			{
			float: left;
			width: 60%;
			margin: 0;
			padding: 0;
			height: 10vw;
			}
			

#navbarbox			
			{
			display: block;
			width: 100%;
			height: 5vw;
			margin: 0vw;
			background-color: white;
			}
#navbar, #navbar ul
			{
			width: 100%;
			height: 5vw;
			margin: 0;
			background-color: green;
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw;
			color: red;
			font-size: 30px;
			}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>

<body>


<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
	<div id="gigalogobox">
		<img id="gigalogo"  src="images/gigalogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--Steam logo, top right-->
<div id="steamlogomainbox">
	<div id="steamlogobox">
		<img id="steamlogo" src="images/steamlogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--navigation barrrrrr-->
<div id="navbarbox" class="clearfix">
	<ul id="navbar">
		<li>Home</li>
		<li>Servers</li>
		<li>Community</li>
		<li>Store</li>
		<li>Download</li>
		<li>Contact</li>
	</ul>
</div>

</body>


</html>

＆＃13;

Answer 2

您可以使用clear: both或只是添加clearfix class toyour navbarbox

＆＃13;

.clearfix	{
			clear: both;
			}

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#gigalogomainbox
			{
			float: left;
			width: 30vw;
			height: 10vw;
			overflow: hidden;
			transform: skewX(20deg);
			margin: 0 0 0 -4vw;
			}
			
#gigalogobox
			{
			margin: 0 3vw 0 2vw;
			padding: 0 0 0 2vw;
			width: 100%;
			height: 8vw;
			}
	
#gigalogo
			{
			width: 80%;
			margin: 3vw 2vw 0 0;
			height: 7vw;
			}
			
#steamlogomainbox
			{
			width: 15vw;
			height: 10vw;
			float: right;
			margin: 0 -4vw 0 0;
			background-color: white; /*000c21*/
			transform: skewX(-20deg);
			overflow: hidden;
			}
					
#steamlogobox
			{
			margin: 0 -2vw 0 3vw;
			padding: 0;
			width: 100%;
			height: 20%;
			}
#steamlogo
			{
			padding: 0 0 0 2vw;
			margin: 3vw 0vw 0 0;
			transform: skewX(20deg);
			height: 7vw;
			}

#placeholderbartop
			{
			float: left;
			width: 60%;
			margin: 0;
			padding: 0;
			height: 10vw;
			}
			

#navbarbox			
			{
			display: block;
			width: 100%;
			height: 5vw;
			margin: 0vw;
			background-color: white;
      clear: both; /*add this*/
			}
#navbar, #navbar ul
			{
			width: 100%;
			height: 5vw;
			margin: 0;
			background-color: green;
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw;
			color: red;
			font-size: 30px;
			}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>

<body>


<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
	<div id="gigalogobox">
		<img id="gigalogo"  src="images/gigalogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--Steam logo, top right-->
<div id="steamlogomainbox">
	<div id="steamlogobox">
		<img id="steamlogo" src="images/steamlogo.png">
	</div>
	<div class="clearfix">
	</div>
</div>

<!--navigation barrrrrr-->
<div id="navbarbox">
	<ul id="navbar clearfix"><!--or do this-->
		<li>Home</li>
		<li>Servers</li>
		<li>Community</li>
		<li>Store</li>
		<li>Download</li>
		<li>Contact</li>
	</ul>
</div>

</body>


</html>

＆＃13;

Div重叠div（HTML / CSS）？

2 个答案: