View Single Post
  #1   IP: 117.95.53.44
Old 2010-04-27, 06:02 PM
topvip topvip is offline
超级版主
 
Join Date: 2006-01-04
Posts: 1206
topvip 正向着好的方向发展
Default 如何实现三个div横向并排呢?

不要放在表格里的,因为容易变形。而是,直接三个赤裸裸的div并排在同一行。

代码如下:

给你个方法:
<div style="float:left; width:30%;">左边版</div>
<div style="float:right;width:30%;">右边版</div>
<div style="float:width:40%;">中间的版</div>
宽度自己设定一下。


如:

Code:
<!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上调试通过.
Reply With Quote