                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

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>

效果图如下：