1
我仍然在学习html和css，试图找出一切正常，没有任何编码经验。请原谅我，如果我问一个愚蠢的或完全多余的东西。Div与div（HTML/CSS）重叠？
基本上，我有3个div，我正在努力。 2个div位于页面的最顶端，均为徽标。一个在左上角，一个在右上角。 我的第三个div，对于导航栏，并没有在它们下面，而是与它们重叠。
我应该只用<br>来处理它吗？
引用的图像是本地的。请参阅http://ddlgaming.com/giga/获取实时版本。
预先感谢您！
我的代码如下所示（请忽略所有的颜色，他们帮助我更好看）：
CSS和HTML：
.clearfix \t {
\t \t \t clear: both;
\t \t \t }
body
\t \t \t {
\t \t \t background-color: rgb(21,14,43);
\t \t \t background-image: url("../images/backgroundimage.jpg");
\t \t \t background-size: cover;
\t \t \t background-repeat: no-repeat;
\t \t \t background-attachment: fixed;
\t \t \t min-height: 100%;
\t \t \t background-position: center center;
\t \t \t overflow: hidden;
\t \t \t }
\t
#gigalogomainbox
\t \t \t {
\t \t \t float: left;
\t \t \t width: 30vw;
\t \t \t height: 10vw;
\t \t \t overflow: hidden;
\t \t \t transform: skewX(20deg);
\t \t \t margin: 0 0 0 -4vw;
\t \t \t }
\t \t \t
#gigalogobox
\t \t \t {
\t \t \t margin: 0 3vw 0 2vw;
\t \t \t padding: 0 0 0 2vw;
\t \t \t width: 100%;
\t \t \t height: 8vw;
\t \t \t }
\t
#gigalogo
\t \t \t {
\t \t \t width: 80%;
\t \t \t margin: 3vw 2vw 0 0;
\t \t \t height: 7vw;
\t \t \t }
\t \t \t
#steamlogomainbox
\t \t \t {
\t \t \t width: 15vw;
\t \t \t height: 10vw;
\t \t \t float: right;
\t \t \t margin: 0 -4vw 0 0;
\t \t \t background-color: white; /*000c21*/
\t \t \t transform: skewX(-20deg);
\t \t \t overflow: hidden;
\t \t \t }
\t \t \t \t \t
#steamlogobox
\t \t \t {
\t \t \t margin: 0 -2vw 0 3vw;
\t \t \t padding: 0;
\t \t \t width: 100%;
\t \t \t height: 20%;
\t \t \t }
#steamlogo
\t \t \t {
\t \t \t padding: 0 0 0 2vw;
\t \t \t margin: 3vw 0vw 0 0;
\t \t \t transform: skewX(20deg);
\t \t \t height: 7vw;
\t \t \t }
#placeholderbartop
\t \t \t {
\t \t \t float: left;
\t \t \t width: 60%;
\t \t \t margin: 0;
\t \t \t padding: 0;
\t \t \t height: 10vw;
\t \t \t }
\t \t \t
#navbarbox \t \t \t
\t \t \t {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t \t height: 5vw;
\t \t \t margin: 0vw;
\t \t \t background-color: white;
\t \t \t }
#navbar, #navbar ul
\t \t \t {
\t \t \t width: 100%;
\t \t \t height: 5vw;
\t \t \t margin: 0;
\t \t \t background-color: green;
\t \t \t }
\t \t \t
#navbar li
\t \t \t {
\t \t \t color: white;
\t \t \t list-style: none;
\t \t \t display: inline-block;
\t \t \t padding: 1vw;
\t \t \t color: red;
\t \t \t font-size: 30px;
\t \t \t }
\t \t \t<!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">
\t <div id="gigalogobox">
\t \t <img id="gigalogo" src="images/gigalogo.png">
\t </div>
\t <div class="clearfix">
\t </div>
</div>
<!--Steam logo, top right--!>
<div id="steamlogomainbox">
\t <div id="steamlogobox">
\t \t <img id="steamlogo" src="images/steamlogo.png">
\t </div>
\t <div class="clearfix">
\t </div>
</div>
<!--navigation barrrrrr--!>
<div id="navbarbox">
\t <ul id="navbar">
\t \t <li>Home</li>
\t \t <li>Servers</li>
\t \t <li>Community</li>
\t \t <li>Store</li>
\t \t <li>Download</li>
\t \t <li>Contact</li>
\t </ul>
</div>
</body>
</html>
首先，你的HTML是打破ñ。评论应该是'<！ - Comment - >'。修理它。接下来，关于'br'的第二个问题。使用'br'解决视觉问题并不好。 –
我们不在这里的标题中做“已解决”。如果您或其他人回答了您的问题，您可以将其标记为允许其他人知道。 – j08691
抱歉，我不知道:( – Mark