表格旁边的浮动图像，宽度为 100%答案

【问题标题】：Float image next to table with 100% width表格旁边的浮动图像，宽度为 100%
【发布时间】：2013-04-03 04:41:09
【问题描述】：

我的问题与this question 中的问题类似，该问题已一年多没有活动。我有一个未知宽度的表格，显示在已知大小的图像旁边。容器的宽度未知。我希望图像向右浮动，并且表格共享一行，扩展以填充剩余空间。我想这样做没有嵌套表（因为 eew）。我认为它应该很简单：

<img src="img.jpg" style="float:right" />
<table style="width:100%">
    ...
</table>

...但事实并非如此。这是一个 close 我想要的小提琴，只是缺少表格宽度：http://jsfiddle.net/K2fpA/

如果可能的话，我想把 CSS3 排除在外。如果绝对必要，我可以做一个嵌套表，但我想先确保我没有遗漏任何东西。有什么想法吗？

【问题讨论】：

不确定您是否知道，但您的内联样式 float:right 缺少分号。
我知道，语法不需要分号。我通常不会在生产页面中使用内联样式（或省略可选的分号），但对于这个问题，我想保持简洁。

标签： html css layout

【解决方案1】：

步骤 1. 添加相对于包含 div 的样式位置。步骤 2. 位置：图像的绝对位置

.container img {
position:absolute;
right:0;
top:0;
}
.container .table-div {
position:relative; 
padding-right:'images-width';
}

<div class="container">
  <div class="table-div"> 
    <table style="width:100%;" >
    </table>
  </div>
</div>

【讨论】：

在图片上使用position: relative and padding-right: [xxx]px` 和float:right 即可。谢谢！

【解决方案2】：

试着把图片放在桌子前面，然后浮动，图片和桌子，对吧。

<div style="float:left;"> <table style="width:100%;" >
...
</table>
<div/>
<div style="float:left;"> <img src="img.jpg" /></div>

已编辑

【讨论】：

每当我浮动表格或其父 div 时，表格都会缩小到可能的最小尺寸（即使我提供了width: 100%）。以 px 为单位设置宽度可以正确调整表格的大小，但在我的情况下不起作用，因为我需要的大小会因浏览器而异。