看下面 的代码:
<!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;
显示如下: