定位此 div 是一场噩梦，请协助 [关闭]答案

【问题标题】：Positioning this div is a nightmare please assist [closed]定位此 div 是一场噩梦，请协助 [关闭]
【发布时间】：2020-12-19 05:27:37
【问题描述】：

在这个JSFiddlehttps://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>

【问题讨论】：

如果您希望它位于导航栏顶部，请使用 position: fixed 或 position: absolute 之类的内容。
1.将您的问题的全部内容放入您的问题中，不要只是链接到它。您可以（并且应该）在现场使用 Stack Snippets（<> 工具栏按钮）创建可运行的 minimal reproducible example。 2.请不要大喊大叫。 3. 你最后喊出来的笔记完全不是你应该警告人们的方式。 “在它绊倒你之前，请注意导航栏布局很容易通过重新定位该 div 来搞乱”（最好有更多相关信息）。请记住，您是在要求人们花时间帮助您。请尊重这一点。
把clear:both放在导航菜单上
position:fixed 不是我要寻找的，问题中已明确概述。 position:absolute 不会产生预期的结果。 @gcampbell
你能解释一下“在导航栏的正上方，同时仍然向右浮动”的意思吗？

标签： javascript jquery html css division

【解决方案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>

【讨论】：

现在只是测试它@hosseinmaktoobian
当我把我的标志放回那一行时，它毁了它，因为在我把图像放回 div 之前它正在工作
我将使用徽标图像更新 sn-p
谢谢！！！ :D @HosseinMaktoobian
欢迎您。现在看看这个