CSS表格问题

我用

.shop1 {overflow:hidden;width:500px;}
.shop2 {float:left;width:150px;}
.shop3 {float:left;width:350px;}

没写义表格的高度，当表格里内容一边的内容比另一边多时就出现了左右不整齐的现象（如图A表）。


请问不使用  height:  定义表格高度，当内容一边多一边少时，左右两边都能对齐啊（如图B表）

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.shop1{overflow:hidden;width:500px;}
/*为了看的清楚，给2个td设置背景色了*/
.shop2{width:150px;background:#009966;}
.shop3{width:350px;background:#996633;}
-->
</style>
</head>

<body>
<table class="shop1" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle" class="shop2">1</td>
    <td align="center" valign="middle" class="shop3" height="500">2</td>
  </tr>
</table>
</body>
</html>

上一个：jquery生成的元素无法应用css样式
下一个：CSS中float:left什么意思？

更多图片编程知识: