topvip
2010-04-27, 06:02 PM
不要放在表格里的，因为容易变形。而是，直接三个赤裸裸的div并排在同一行。
代码如下：
给你个方法：
<div style="float:left; width:30%;">左边版</div>
<div style="float:right;width:30%;">右边版</div>
<div style="float:width:40%;">中间的版</div>
宽度自己设定一下。
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>Div元素左中右三列并排</title>
<style type="text/css">
body{text-align:center;}
div{border:1px solid black;padding:1px;margin:1px;}
#main{width:730px;}
#main div
{/* 根据浏览器类型选择display样式 */
display:inline; /*IE6*/
/* display:table-cell; /*NS9*/
}
#left{width:120px;}
#center{width:480px;}
#right{width:120px;}
</style>
</head>
<body>
<div id="main">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
本代码在IE6及NS9上调试通过.
代码如下：
给你个方法：
<div style="float:left; width:30%;">左边版</div>
<div style="float:right;width:30%;">右边版</div>
<div style="float:width:40%;">中间的版</div>
宽度自己设定一下。
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>Div元素左中右三列并排</title>
<style type="text/css">
body{text-align:center;}
div{border:1px solid black;padding:1px;margin:1px;}
#main{width:730px;}
#main div
{/* 根据浏览器类型选择display样式 */
display:inline; /*IE6*/
/* display:table-cell; /*NS9*/
}
#left{width:120px;}
#center{width:480px;}
#right{width:120px;}
</style>
</head>
<body>
<div id="main">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
本代码在IE6及NS9上调试通过.