看下面 的代码:
<!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=utf-8" />
<title>无标题文档</title>
</head>
<style>
#content1{
width:240px;
margin:10px;
padding:10px;
background:gray;
}
#content2{
width:200px;
margin:10px;
padding:10px;
}
</style>
<body>
<div id="content1">
1 先最重要的!!!!权力的游戏和指环王权力的游戏全名是《冰与火之歌:权力的游戏》 根据小说改编
<div id="content2">
2先最重要的!!!!权力的游戏和指环王权力的游戏全名是《冰与火之歌:权力的游戏》 根据小说改编
</div>
</div>
</body>
</html>
显示如下:
两个元素之间间隔是20px;没有发生折叠。
如#content2添加:
position:absolute;
top:0;
right:0;
第二个div会显示到屏幕右上角,第一个div的高度会是文本的大小高度。
怎么把第二个div显示到第一个div的右上角?
在第一个div增加:
position:relative;
显示如下: