将此div定位是一场噩梦，请协助 [英] Positioning this div is a nightmare please assist
本文介绍了将此div定位是一场噩梦，请协助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在此JSFiddle中 https://jsfiddle.net/Please_Reply/Lj0x38f2/6/，您会看到这行代码...
In this JSFiddle https://jsfiddle.net/Please_Reply/Lj0x38f2/6/, you can see that this line of code...
<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
引起了一个问题，因为它应该位于导航栏的正上方，同时仍然向右浮动，但是当导航栏应对齐时位于该div的下面时，它会将导航栏从右侧推出带有标题的底部.
causes an issue because it is supposed to be directly above the navigation bar whilst still floating to the right, but instead it pushes the navigation bar out from the right hand side, when the navigation bar should be sitting underneath that div in alignment with the base of the header.
当我说导航栏时，的确是指下面的所有代码...
When I say the navigation bar, I am indeed referring to all of the code below...
<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时导航栏很容易被破坏.
Please keep in mind that the navigation bar is easily ruined when repositioning the divs.
所有代码在一起是...
All the code together is...
<!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>
推荐答案
如果将 clear:both 添加到导航div中，它将下降，并且您应该删除的高度.header 以适合内容.因此它只适合提供的图像.这是代码:
If you add a clear:both to your navigation div it will come down and you should remove the height of your .header to fit the content. so it will just fit the provided image. here is the code:
$(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定位是一场噩梦，请协助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
