关于div+css的布局的问题

发布网友发布时间：2024-10-01 11:06

共4个回答

热心网友时间：2024-10-01 11:14

float:left

热心网友时间：2024-10-01 11:16

最好别嵌套不过达到你那效果也可以了

热心网友时间：2024-10-01 11:16

<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;}
body{ background:#000; font-size:12px; color:#f00;}
#contain{ width:1000px; height:auto; margin:0 auto;}
#leftContent,#middleContent,#rightContent{ float:left; height:700px;}
#leftContent{ width:190px; background:#0099CC; margin-right:10px;}
#middleContent{ width:600px; background:#FFFFCC; margin-right:10px;}
#rightContent{ width:190px; background:#CCCCFF;}
</style>
</head>

<body>
<div id="contain">
<div id="leftContent">左边的层</div>
<div id="middleContent">中间的层</div>
<div id="rightContent">右边的层</div>
</div>
</body>
</html>

热心网友时间：2024-10-01 11:10

例:
.box{//一个大盒子
width:980px;//定义宽
hight:200px;//定义高
margin:0 auto;//左右自动,也就是居中的意思
}
.a{ //定义的样式
width:100px; //定义宽
hight:100px; //定义高
margin-left:10px; //设置距左的距离
float:left; //设置左浮动,也就是你所说的水平对齐
}
.b{
width:100px;
hight:100px;
margin-left:10px;
float:left;
}
.c{
width:100px;
hight:100px;
margin-left:10px;
float:left;
}

上面的样式设置好了不调用是没有任何意义的

在body中调入:

<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>

这样就可以了,如果你看不到效果的话,那是因为没有给div加背景色,我要下班了,呵..背景色你自己加吧,希望对你有帮助