100％宽度的桌子旁边的浮动图像

我的问题与this question中的问题类似，该问题在一年内尚未见到。我有一张未知宽度的桌子，显示在已知大小的图像旁边。容器的宽度未知。我希望图像正确地浮动，并且表格共享一条线，扩展以填充剩余的空间。我想这样做没有嵌套表（因为eew）。我认为它应该如此简单：100％宽度的桌子旁边的浮动图像

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

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

如果可能的话，我想保持CSS3出来。如果绝对必要，我可以做一个嵌套表格，但我想确保我不会错过任何东西。有任何想法吗？

来源

2013-04-11 Dan Hlavenka

不知道，如果你知道，但你的内嵌样式'浮动：right'缺少一个分号。 – vtacreative 2013-04-11 05:12:31

我知道，并且该语法不需要该分号。我通常不会在生产页面中使用内联样式（或省略可选分号），但对于此问题，我想保持简洁。 – 2013-04-11 05:28:12

步骤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>

来源

2013-04-11 08:14:25

只要在工作的图像上使用'position：relative''和'padding-right：[xxx] px'，并且'float：right'。谢谢！ – 2013-04-13 06:11:58

尝试将图像放在表格之前，并将图像和表格都浮在右边。

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

EDITED

来源

2013-04-11 05:10:00 7alhashmi

任何时候我浮动表或其父div，表缩小到可能的最小尺寸（即使当我提供'宽度：100％'）。在px中设置宽度可以正确调整表格大小，但对我来说不起作用，因为我需要的大小会因浏览器而异。 – 2013-04-11 05:32:27

100％宽度的桌子旁边的浮动图像

回答

相关问题