定位此 div 是一场噩梦，请协助

Question

在这个 JSFiddle https://jsfiddle.net/Please_Reply/Lj0x38f2/6/ 中，你可以看到这行代码...

<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>

导致问题，因为它应该直接在导航栏上方，同时仍然向右浮动，但它却将导航栏从右侧推出，而导航栏应该位于 div 与页眉底部对齐。

当我说导航栏时，我确实指的是下面的所有代码...

<div style="float:right"> <!-- This is the navigation menu -->
            <div style="position:relative"> <!-- This is the container of the navigation menu -->
                <div id="slider"></div> <!-- This is the slider bar -->
                <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
                <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
                <a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
                <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>

请记住，重新定位 div 时，导航栏很容易被破坏。

所有代码加在一起是...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/cssfile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container"> <!-- This is the container -->
    <div class="header"> <!-- This is the header -->
        <div style="float:left"> <!-- This is the logo -->
            <img src="images/mattsubishilogowhite.png" height="120px"/>
        </div>
        <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
        <div style="float:right; clear:both"> <!-- This is the navigation menu -->
            <div style="position:relative"> <!-- This is the container of the navigation menu -->
                <div id="slider"></div> <!-- This is the slider bar -->
                <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
                <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
                <a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
                <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>
    <div class="body"> <!-- This is the body -->
    </div>
    <div class="footer"> <!-- This is the footer -->
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
  $("#slider").animate({
    "left": $(".item:first").position().left + "px",
    "width": $(".item:first").width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#one').position().left + "px",
      "width": $('#one').width() + "px"
    }, 500);
  });
});
</script>
<script>
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isAtLeastIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
if(isChrome){
    alert("Your using Chrome, please be aware that using Chrome will reduce some functionality of this website therefore you should use Internet Explorer version 11 or higher.");
}else{
    if(!isAtLeastIE11){
        alert("Your version of Internet Explorer is below 11. It needs to be 11 or higher for some aspects of this website's functionality to work. Please update or use Chrome.");
    }
}
</script>

Answer 1

如果您在导航 div 中添加 clear:both，它会下降，您应该移除 .header 的高度以适应内容。所以它只适合提供的图像。这是代码：

$(document).ready(function() {
  $("#slider").animate({
    "left": $(".item:first").position().left + "px",
    "width": $(".item:first").width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#one').position().left + "px",
      "width": $('#one').width() + "px"
    }, 500);
  });
});

body{ /* Applies to the <body> tag */
 margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
 width:100%; /* This sets the width */
 height:100%; /* This sets the height */
 background-color:black; /* Sets the background colour */
}
.header{ /* The header class */
 width:100%;
 background-color:#323232;
 color:white; /* The sets the colour of the font */
}
.body{
 width:100%;
 height:495px;
 background-color:white;
 color:black;
}
.footer{
 width:100%;
 height:50px;
 background-color:#323232;
 color:white;
}
div{
    display: inline-block;
    float:left;
}
#one, #two, #three, #four{
    background-color:#323232;
    height:96px;
 color:white;
 text-align:center;
 font-size:25px;
 font-family:"Myriad Pro";
}
#slider{
    background-color:#ed1c24;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    bottom:0;
}
.inside{
 margin-left:30px;
 margin-right:30px;
 padding-top:7px;
 pointer-events:none;
 margin-top:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <!-- This is the container -->
 <div class="header"> <!-- This is the header -->
     <div style="float:left"> <!-- This is the logo -->
         <img src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" height="100px">
        </div>
        <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
        <div style="float:right; clear:right"> <!-- This is the navigation menu -->
         <div style="position:relative"> <!-- This is the container of the navigation menu -->
             <div id="slider"></div> <!-- This is the slider bar -->
             <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
       <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
       <a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
       <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>
    <div class="body"> <!-- This is the body -->
    </div>
    <div class="footer"> <!-- This is the footer -->
    </div>
</div>

定位此 div 是一场噩梦，请协助

Positioning this div is a nightmare please assist

html

javascript

css

jquery

division