有一個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>