css - 如何获得图像旁边的 flex 表？

Question

这就是我想要的: http://img571.imageshack.us/img571/4618/myimage.png

这是我能想到的最好的:

CSS

img
{
  background: red;
  float: left;
}

table
{
  background: yellow;
  width: 90%;
}

HTML

<img src="image.jpg" width="40" height="40" />
<table>
  <tr><td>Table</td></tr>
</table>

这种方法有问题。如果您在某个时候调整浏览器窗口的大小，表格会跳到图像下方:click to view demo .

实现这种布局的更好方法是什么？

Answer 1

尝试用这样的 div 围绕您的表格:

<img src="image.jpg" width="40" height="40" />

<div style="padding-left:40px">       
  <table> 
    <tr><td>Table</td></tr> 
  </table> 
</div>