This is what I want: http://img571.imageshack.us/img571/4618/myimage.png
This is t开发者_JAVA技巧he best I could come up with:
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>
There is a problem with this approach. If you resize browser window at some point the table jumps below the image: click to view demo.
What is the better way of achieving this layout?
Try surrounding your table with div like that:
<img src="image.jpg" width="40" height="40" />
<div style="padding-left:40px">
<table>
<tr><td>Table</td></tr>
</table>
</div>
Some people might not like tables, but you could use a table with 2 cells that contains your image on the left and the table on the right.
精彩评论