关于html div绝对位置问题 5
做完是这样的。。但是不是我想要的效果，想要的是下面的这种。<divstyle="width:70%;height:50px;background-color:#00000...
做完是这样的。。但是不是我想要的效果，想要的是下面的这种。
<div style="width: 70%;height: 50px;background-color: #000000;margin-left: 15%"> <div style="float: left;height: 50px;width: 147px;background-color: red;position: absolute;"></div> <div style="float: right;height:100%;width: 795px;background-color: blue;"> <div style="position: absolute;top: 0;right:0;height: 25px;width: 200px;background-color: pink"></div>
<div style="position:absolute;top: 25px;height: 25px;width: 795px;background-color: yellow"></div>
</div></div>
麻烦大家给看看，给我讲讲。。。 展开
<div style="width: 70%;height: 50px;background-color: #000000;margin-left: 15%"> <div style="float: left;height: 50px;width: 147px;background-color: red;position: absolute;"></div> <div style="float: right;height:100%;width: 795px;background-color: blue;"> <div style="position: absolute;top: 0;right:0;height: 25px;width: 200px;background-color: pink"></div>
<div style="position:absolute;top: 25px;height: 25px;width: 795px;background-color: yellow"></div>
</div></div>
麻烦大家给看看，给我讲讲。。。 展开
1个回答
展开全部
<html>
<head>
<title></title>
</head>
<body>
<div style="position:absolute;margin-left:15%;margin-top:20px;width:1000px;height:400px;background-color:yellow;">
<div style="position:relative;float:left;height:400px;width:300px;background-color:red;"></div>
<div style="position:relative;float:left;height:200px;width:400px;background-color:blue;"></div>
<div style="position: relative; float: left; height: 200px; width: 300px; background-color: pink;"></div>
</div>
</body>
</html>
以上是根据你提供的代码进行修改！以下是效果图
1、设置一个DIV div1为最外边框，相当于容器。然后再在里面放div。
2、容器div1里有三个div。设置为相对位置，向左漂浮。
3、设置div2高度宽度，添加div3的时候会自动在div2的右边。
注：如果三个div的宽度相加大于1000px（容器宽度）时，会自动向下飘，如下图：
以下是规范写法
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
position: absolute;/*绝对定位，将DIV1外面的大框用绝对定位进行div的固定*/
margin-left: 15%;/*距左15%的距离*/
margin-top: 20px;/*距上20px的距离*/
width: 1000px;/*宽设定1000px*/
height: 400px;/*高设定400px*/
background-color: yellow;
}
.div2 {
position: relative;
float: left;
height: 400px;
width: 300px;
background-color: red;
}
.div3 {
position: relative;
float: left;
height: 200px;
width: 400px;
background-color: blue;
}
.div4 {
position: relative;
float: left;
height: 200px;
width: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
建议你理解一下DIV绝对定位 和 相对定位 的区别 和作用，在以后的页面布局都会用到！
去w3cschool上看一下练习，很快就能理解！
望采纳！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
