有一个div的摆放问题

Question

我有一些问题，一个div - >

#Next-Level, #Last-Level { 
 
    width:100%; 
 
    height:100px; 
 
    position:fixed; 
 
    left:0px; 
 
} 
 

 
#Next-Level { 
 
    top:0px; 
 
    border-bottom:5px red dotted; 
 
} 
 

 
#Last-Level { 
 
    bottom:0px; 
 
    border-top:5px blue dotted; 
 
}

<div id="Levels">  
 
    <div id="Last-Level"></div> 
 
    <div id="Current-Level"></div> 
 
    <div id="Next-Level"></div> 
 
</div>

https://jsfiddle.net/zwzh64wb/ - 我想最后所作出之间的“格 “当前级别”级别”和‘下一级’，我不知道如何..

Answer 1

试试这个

             
  
 
   
 
    
#Next-Level, #Last-Level { 
 
     width:100%; 
 
     height:100px; 
 
     position:fixed; 
 
     left:0px; 
 
} 
 
    #Current-Level { 
 
     width:100%; 
 
     height:100px; 
 
     position:fixed; 
 
     top:150px; 
 
} 
 
     
 

 
    #Next-Level { 
 
     top:0px;border-bottom:5px red dotted; 
 
} 
 
    #Last-Level { 
 
     bottom:0px;border-top:5px blue dotted; 
 
} 
 
    #Current-Level { 
 
     bottom:0px;border-top:5px green dotted; 
 
}
 
    
<div id="Levels">  
 
     <div id="Last-Level"></div> 
 
     <div id="Current-Level"></div> 
 
     <div id="Next-Level"></div> 
 
    </div>
 
   
 
  
 
 

 

Answer 2

您已创建当前级别div元素，但尚未定义相同的CSS属性。就像First-Level和Last-LeveL一样，您必须指定Current-Level的CSS属性。

Click this to check it out

#Next-Level, #Last-Level, #Current-Level { 
    width:100%; 
    height:100px; 
    position:fixed; 
    left:0px;} 

#Next-Level {top:0px;border-bottom:5px red dotted;} 
#Last-Level {bottom:0px;border-top:5px blue dotted;} 
#Current-Level {margin-top:33%;border-top:5px black dotted;} 

Answer 3

试试这个。

#Next-Level, #Last-Level { 
 
    width:100%; 
 
    height:100px; 
 
    } 
 

 
#Next-Level {border-bottom:5px red dotted;} 
 
#Last-Level {border-top:5px blue dotted;} 
 
#Current-Level {border-bottom:5px black dotted;}

<div id="Levels">  
 
    <div id="Last-Level"></div> 
 
    <div id="Current-Level"></div> 
 
    <div id="Next-Level"></div> 
 
</div>