使用jQuery使絕對div與另一個div相同的頂部位置

Question

我在這里需要一些CSS / jQuery專家。

基本上，有2個父div並排放置。 第一父div包含一張圖片，在其下方包含一張表格。 第二個父div只包含一個樣式position: absolute;的表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);

這是一個jsfiddle： https ://jsfiddle.net/7wvjra83/1/

基本上，您采用第一個表格的位置並設置要對齊的第二個表格的css。 希望這對你有用