项目地址
index.jsp
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color: #FFFF99;
with: 100%;
height: 100px;
border: 1px dashed green;
position: relative;
}
#son1{
position: absolute; /* 相对于father定位*/
right: 0px;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbb</div>
<div id="son3">cccccccccccc</div>
</div>
</div>
</body>
</html>
index2.jsp
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color: #FFFF99;
with: 100%;
height: 100px;
border: 1px dashed green;
}
#son1{
position: absolute; /* 相对于浏览器边框定位*/
right: 0px;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbb</div>
<div id="son3">cccccccccccc</div>
</div>
</div>
</body>
</html>
index3.jsp
<title>采用div定位技术（相对定位）</title>
</head>
<style>
#father{
background-color: #FFFF99;
with: 100%;
height: 100px;
border: 1px dashed green;
}
#son1{
position: relative;
left: 60%;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbb</div>
</div>
</div>
</body>
</html>
index4.jsp
<title>采用div定位技术（相对定位）</title>
</head>
<style>
body{
margin: 0px 1px 2px 3px;
}
#father{
background-color: #FFFF99;
with: 100%;
height: 100px;
border: 1px dashed green;
}
#son1{
float: left;
}
#son2{
float: left;
}
#son3{
float: left;
}
#clear{
clear: both;
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbb</div>
<div id="son3">cccccccccccc</div>
<div id="clear"></div>
<div id="son4">dddddddddddd</div>
</div>
</div>
</body>
</html>
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
