如何实现一列二行的CSS布局

发布网友发布时间：2022-04-06 13:10

共1个回答

热心网友时间：2022-04-06 14:40

设置两个div框架，分别设置这两个div框架的宽度（宽度应小于或是等于整体宽度），把它们都设置成float：left。基本就是这样了。

<!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">
*{
margin:0; padding:0; border:0; font-size:12px; color:#000;
}
body{
text-align:center; font-family:宋体, sans-serif;
}
#main{
width:950px; text-align:left; margin:0 auto;
}
#left{
float:left; width:240px; background:#9fc; margin-right:10px;
}
#right{
float:left; width:700px; background:#f69;
}
</style>
</head>

<body>
<div id="main">
<div id="left">左边部分</div>
<div id="right">右边部分</div>
</div>
</body>
</html>

代码你可以看一下，能实现一行两列