<!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/htmlcharset=gb2312" />
<title>一行两列</title>
<style type="text/css">
*{
margin:0padding:0border:0font-size:12pxcolor:#000
}
body{
text-align:centerfont-family:宋体, sans-serif
}
#main{
width:950pxtext-align:leftmargin:0 auto
}
#left{
float:leftwidth:240pxbackground:#9fcmargin-right:10px
}
#right{
float:leftwidth:700pxbackground:#f69
}
</style>
</head>
<body>
<div id="main">
<div id="left">左边部分</div><!--left end-->
<div id="right">右边部分</div><!--right end-->
</div><!--main end-->
</body>
</html>
代码你可以看一下,能实现一行两列
div+css做页面的一行两列布局,首先我们是需要三个div的,第一个div包裹着其他的2个div,然后给那2个div设置float属性和width,height,最好是给个border利于布局的时候方便观察,这里举个例子:<html>
<head>
<style>
#div1{
width:960px//通过id来控制
height:600px
}
.left{
width:400px
height:400px
border:1px solid #f00
float:left
marign-right:40px //距离第三个div有点距离
}
.right{
width:400px
border:1px solid #f00
height:400px
float:left
}
</style>
</head>
<body>
<div id='div1'>
<div class='left'>我是左边的</div>
<div class='right'>我是右边的</div>
</div>
</body>
</html>
<div width="100%"><div style="float:leftheight:50px width:50%background:red"></div>
<div style="float:leftheight:50px width:0pxborder-left:1px solid greenborder-right:1px solid green"></div>
<div style="float:leftheight:50px width:49%background:red"></div>
</div>
想要两个等宽的话就不能都50%