Question

我有以下HTML代码：

<table class="layout"><tr><td>
  <img src="image.jpg" style="float:right;" />
  <table>
    <tr><td>Blah</td><td>Blah</td></tr>
    <tr><td>Blah</td><td>Blah</td></tr>
  </table>
</table>

这表现如下：

+-------------------------------------------+
|      +-----------------------------------+|
|      |                                    |
|      |               (image)              |
|      |                                    |
|      +-----------------------------------+|
|+----++----+                               |
||Blah||Blah|                               |
|+----++----+                               |
||Blah||Blah|                               |
|+----++----+                               |
~                                           ~
+-------------------------------------------+

这是有道理的，因为该表是一个块元素，它不会换行并向下移动以清除图像。但是，我想要完成的是让表格与图像部分重叠：

+-------------------------------------------+
|+----++-----+-----------------------------+|
||Blah||Blah|                               |
|+----++----+          (image)              |
||Blah||Blah|                               |
|+----++----+------------------------------+|
~                                           ~
+-------------------------------------------+

这很复杂，因为所有页面内容都存在于布局表中（它的遗留代码;使用CSS进行布局当然会更好，但我仍然坚持这个原样）。在图像上使用position: absolute将其定位为参考视口的绝对值，而不是布局表。即靠在右侧视口边缘而不是右侧布局表边缘。

这样做的最佳方式是什么？

Answer 1

要防止内部表相对于视口定位，您需要在父表上使用position: relative

在内部桌子上使用position: absolute和top / left / right / bottom以获得您想要的位置。

Have an example!

CSS

.layout {
    position: relative;
}

.layout table {
    position: absolute;
    top: 0;
}

根据您的旧版布局的混乱程度，您可能会遇到此表中其他子项的问题。在这种情况下，将父表中的所有内容包装在<div>中，然后改为position: relative。

Second example with inner div wrap.

HTML

<table class="layout"><tr><td>
  <div class="relative">
      <img src="image.jpg" style="float:right;" />
      <table>
        <tr><td>Blah</td><td>Blah</td></tr>
        <tr><td>Blah</td><td>Blah</td></tr>
     </table>
  </div>
</td></tr><!-- close that cell and row! -->
</table>

CSS

.layout .relative {
    position: relative;
}

.layout table {
    position: absolute;
    top: 0;
}

Answer 2

在内部表格中添加一个div并指定float:left

 <table class="layout"><tr><td>
   <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" style="float:right;" />
   <div style="float:left">
   <table>
     <tr><td>Blah</td><td>Blah</td></tr>
     <tr><td>Blah</td><td>Blah</td></tr>
   </table>
   </div>
</table>

DEMO

Answer 3

你可以在桌子上放一个负边距，使它向上移动。但是，因为它只是一个图像，为什么不在桌子的背景中有图像？

table#myTable {
    background-image: url('/path/to/image.jpg');
    background-position: 50px /*50px to the right*/ top;
}

使表格与图像部分重叠

3 个答案: