如何实现三个div横向并排呢？

topvip · #1 IP: 117.95.53.44 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>
宽度自己设定一下。

如：

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上调试通过.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)