Relative与Absolute组合使用生成的效果,用内联块状元素为什么不一样呢?
需求:一个Span标签与成一列的两个span在一行上,如下图:
下面是我用Relative与Absolute组合写的代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>相对参照元素进行定位</title> <style type="text/css"> div{border:2px red solid;} #outer{ width:300px; height:300px; position:relative; border:2px red solid; } #spanOuter{ width:150px; height:200px; border:1px orange solid; position:absolute; top:0px;} #relativeDiv{ width:150px; height:200px; border:2px green solid; position:absolute; left:155px;} #inner1{ width:145px; height:100px; border:2px pink solid; position:absolute; top:1px;} #inner2{ width:145px; height:100px; border:2px pink solid; position:absolute; bottom:1px;} </style> </head> <body> <div id=outer> <span id=spanOuter>瞅我干啥</span> <div id=relativeDiv> <span id=inner1>再瞅我一个试试</span> <span id=inner2>试试就试试</span> </div> </div> </body> </html>
效果图如下:
我用内联块写的如下图:
问题:
请问为什么用内联块写不在一行上,应该怎么改?为什么?