Question

此链接将在下方，但我会给你一个纲要。我需要将div对齐到与跨度相同的水平位置，该跨度位于嵌套的div中。为此，我试图弄清楚它与页面右边的距离。它看起来像这样。

var position = $('#creators-toggle').position();
$('#offset').html(position.top);
$('#offset-left').html(position.left);
var marginright = ($(window).width - position.left);

当我显示position.left时，我得到821.890625不确定为什么有人会帮忙？

链接位于：http://codepen.io/sbhenrichs/pen/ZOjyrm/

Answer 1

我真的不明白你的意思是什么＆＃34;不确定为什么＆＃34;，但是你得到了这个，因为这是从窗口左边开始的这个元素的位置。

如果你想将div对齐到同一个位置 - 你应该从左边（而不是右边）位于完全相同的位置：

var position = $('#creators-toggle').position();
//$('#offset').html(position.top);
//$('#offset-left').html(position.left);
// This is how you can position the element at the exact horizontal position
$('.creator-dropdown').css('left', position.left);

这是一个例子：

＆＃13;

$(document).ready(function() {
	var position = $('#creators-toggle').position();
	$('#offset').html(position.top);
	$('#offset-left').html(position.left);
    
	$('.creator-dropdown').css('left', position.left);
	$('.creator-dropdown').hide(0);
  
	$('#creators-toggle').click(function() {
		if($('.creator-dropdown').is(':visible')) {
			$('.creator-dropdown').slideUp(250);
		}
		if($('.creator-dropdown').is(':hidden')) {
			$('.creator-dropdown').slideDown(250);
		}
	});
});

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400';
html {
  font-family: "Lato", sans-serif;
}

html, head, body {
  margin: 0px;
  padding: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

.navbar {
  border-bottom: 1px solid #eee;
  position: relative;
  height: 70px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
}

.nav-content {
  width: 75%;
  margin-left: 12.5%;
}

.brand-con {
  line-height: 70px;
  height: 100%;
  display: inline-block;
}

.brand {
  font-weight: 300;
  font-size: 150%;
  color: #33bf90;
}

.links-right {
  display: inline-block;
  float: right;
  height: 100%;
  line-height: 70px;
  color: #696969;
  font-weight: 300;
}

.link-right {
  margin-right: 25px;
  transition: all 250ms cubic-bezier(0.17, -0.3, 0.79, 1.29);
}
.link-right:hover {
  color: #33bf90;
}

.creator-dropdown {
  width: 225px;
  border: 1px solid #eee;
  position: absolute;
  font-weight: 300;
  padding: 20px;
  top: 70px;
  background: white;
}

.tab-left {
  margin-left: 25px;
}

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  </head>
  <body>
    <div class="navbar">
      <div class="nav-content">
        <div class="brand-con">
          <span class="brand">placeholder</span>
        </div>
        <div class="links-right">
          <span class="link-right" id="creators-toggle">Creators</span>
          <span class="link-right">Our Mission</span>
          <span class="link-right">About</span>
          <span class="link-right">Contact Us</span>
        </div>
      </div>
    </div>
    <div class="creator-dropdown">
      <span>Video Creators</span>
      <br />
      <br />
      <span class="tab-left">What we can do for you</span>
      <br />
      <br />
      <span class="tab-left">How you can help</span>
      <br />
      <br />
      <br />
      <span>Bloggers</span>
      <br />
      <br />
      <span class="tab-left">Why our service works best</span>
      <br />
      <br />
      <span class="tab-left">What you can do</span>
    </div>
    <h1 id="offset"></h1>
    <h1 id="offset-left"></h1>
  </body>
</html>

＆＃13;

如果有人会随窗口宽度而改变 - 你的定位将停止工作，你需要重新定位该元素。

您可以使用：

$('#creators-toggle').click(function() {
    if($('.creator-dropdown').is(':visible')) {
        $('.creator-dropdown').slideUp(250);
    }
    if($('.creator-dropdown').is(':hidden')) {
        // This will re-position the element every time we should display it in the correct position.
        var position = $(this).position();
        $('.creator-dropdown').css('left', position.left);
        $('.creator-dropdown').slideDown(250);
    }
});

Position.left不显示数字

1 个答案: