代码改变世界

css 边距折叠和定位

2012-08-22 02:04  youxin  阅读(302)  评论(0)  编辑  收藏  举报

看下面 的代码：

<!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;

显示如下：