css中div的布局问题

来源：百度知道 编辑：UC知道 时间：2024/06/20 04:04:53
<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">
<!--
body{
text-align:center;
}
.main{
text-align:center;
width:800;
margin:0px;
padding:0px;
}
.top{
text-align:center;
height:151;
margin:0px;
border:1px solid #000000;
}
.left{
float:left;
width:300;
height:300;
margin:10px 10px 0px 0px;
border:1px solid #000000;
}
.mid{
clear:both;
width:490;
height:300;
margin:0px 0px 0px 310px;
padding:0px;
border:1px solid #000000;
}
-->
</style>
</head>

<body>
<div class="

<style type="text/css">
<!--
body{
text-align:center;
}
.main{
text-align:center;
width:800px;
margin:0px;
padding:0px;
}
.top{
text-align:center;
height:151px;
margin:0px;
border:1px solid #000000;
}
.left{
float:left;
width:300px;
height:300px;
border:1px solid #000000;
}
.mid{ float:right;
width:490px;
height:300px;

padding:0px;
border:1px solid #000000;
}
-->
</style>

样式改为这个就好了

要点：1 宽度 高度的 值 除0外都要有px做单位的
2 右侧的div 用float 右浮动就好了。不能用margin设置居左多远的
3 在浮动状态上，尽量少用外边距