开发者

How to get elastic table next to an image?

开发者 https://www.devze.com 2022-12-28 12:25 出处:网络
This is what I want: http://img571.imageshack.us/img571/4618/myimage.png This is t开发者_JAVA技巧he best I could come up with:

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消