实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:20%;background-color:red;float:right">1</div> <!--1向右飘--> <div style="width:90%;background-color:#15990d;float:right">2</div> <!--2向右飘--> <div style="background-color:#179793;display:inline;">内容1</div> <!--内容1的块级标签变行内标签--> <span style="background-color:#ff86eb;display:block;">内容2</span> <!--内容2的行内标签变块级标签--> <br/> <div style="height:35px;width:400px;position:relative;" > <!--相关位置--> <!--此处为相关位置与绝对位置联合使用--> <input type="text" style="height:50px;width:350px;padding-right:50px;"> <span style="position:absolute;right:5px;top:5px;background-image:url(user.ico);height:41px;width:41px;display:inline-block;"></span> <!--绝对位置--> </div> </body> </html>
结果: