javascript - 使用 jQuery 使绝对 div 与另一个 div 的顶部位置相同

Question

我需要一些 CSS/jQuery 专家。

基本上，有 2 个父 div 并排放置。第一个父 div 包含一张图片，下面包含一个表格。 第二个父 div 仅包含一个样式为 position: absolute; 的表格。

现在的问题是，图片的高度不同，这意味着它下面的 table 的位置会发生变化。

因此，如何在不更改 HTML 结构的情况下使第二个 div 上的表格与第一个表格对齐。是否可以使用 jQuery 来实现，例如获取第一个表格位置并将其应用于第二个表格？

基本上这里的结构是:

.picture {
  background-color: #000;
  width: 550px;
}

.second-table {
  position: absolute;
  top: 385px;
}

<div class="div1" style = "width: 30%; display: inline-block;">
  <div class="picture" style="height: 378px;">
  </div>
  <table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
			<tbody><tr class="">
			<th>Model</th>
			<td><p>Legend Diver</p>
</td>
		</tr>
			<tr class="alt">
			<th>Reference</th>
			<td><p>L3.674.4.50.0</p>
</td>
		</tr>
			<tr class="">
			<th>Gender</th>
			<td><p>Mens</p>
</td>
		</tr>
			<tr class="alt">
			<th>Case Size</th>
			<td><p>42.0 mm</p>
</td>
		</tr>
			<tr class="">
			<th>Case Material</th>
			<td><p>Stainless steel</p>
		</tr>
	    </tbody></table>
</div>

<div class="div2" style = "width: 50%; display: inline-block;">
  <table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
			<tbody><tr class="">
			<th>Model</th>
			<td><p>Legend Diver</p>
</td>
		</tr>
			<tr class="alt">
			<th>Reference</th>
			<td><p>L3.674.4.50.0</p>
</td>
		</tr>
			<tr class="">
			<th>Gender</th>
			<td><p>Mens</p>
</td>
		</tr>
			<tr class="alt">
			<th>Case Size</th>
			<td><p>42.0 mm</p>
</td>
		</tr>
			<tr class="">
			<th>Case Material</th>
			<td><p>Stainless steel</p>
		</tr>
	    </tbody></table>
</div>

Answer 1

您可以为此使用 jquery，是的。像这样的东西:

var test = $( ".shop_attributes1" );
var position = test.position();
$('.second-table').css('top', position.top);

这是一个 jsfiddle:https://jsfiddle.net/7wvjra83/1/

基本上，您占据第一个表格的位置，并为第二个表格设置要对齐的 css。希望这对你有用