Question

我需要一些CSS / jQuery专家。

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

现在的事情是，图片的高度不同，因此，它下面的桌子的位置将会改变。

因此，如何在不更改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

我不太确定这是否是您要寻找的东西，但是我希望它可以帮助您

$('.second-table').css('left', 361);

.picture {
  background-color: #000;
  width: 550px;
}

.second-table {
  position: absolute;
  top: 385px;
 


----------


 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 2

您可以为此使用jquery，是的。像这样：

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

这是一个简单的例子：https://jsfiddle.net/7wvjra83/1/

基本上，您将第一个表放在位置并为要对齐的第二个表设置css。希望这对您有用

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

2 个答案: