實現CSS Sidenav和內容

我正在使用Materialize CSS來設計我的投資組合，並且現在有一些問題。什麼我的網站上查找現在的截圖是這樣的：實現CSS Sidenav和內容

正如你所看到的，關於部分是這是我的問題資產淨值之下。我希望它被移到右邊，以便可以看到它。我現在的代碼是：

<!DOCTYPE html> 
<html> 
    <head> 
    <!--Import Font awesome Icon Font--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/> 
    <link type="text/css" rel="stylesheet" href="css/style.css" /> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 
    <body> 
    <header> 
     <ul id="staggered-list" class="side-nav fixed grey darken-4 blue-grey-text text-lighten-4 go"> 
     <br /> 
     <div style="text-align:center;" id="profilepic"> 
      <img src="./images/robertsoriano.jpg" alt="" class="circle responsive-img" width="200"> <br /> 
      Robert Soriano 
     </div> 
     <br /> <br /> 
     <li><a class="grey-text text-lighten-2" href="#"><i class="fa fa-user fa-2x fa-fw"></i>Home</a></li> 
     <li><a id="links" class="pink-text lighten-2" href="#"><i class="fa fa-terminal fa-2x fa-fw"></i>Projects</a></li> 
     <li><a id="links" class="green-text text-lighten-2" href="#"><i class="fa fa-bar-chart fa-2x fa-fw"></i>Skills</a></li> 
     <li><a id="links" class="yellow-text text-lighten-2" href="#"><i class="fa fa-graduation-cap fa-2x fa-fw"></i>Education</a></li> 
     <li><a id="links"class="blue-text text-lighten-2" href="#"><i class="fa fa-code fa-2x fa-fw"></i>Source Codes</a></li> 
     </ul> 
    </header> 
    <main> 
     <div class="section"> 
     <div class="container"> 
      <div class="row"> 
      <div class="col s12 m9"> 
       <h1 class="header center-on-small-only">About</h1> 
       <h4 class ="light red-text text-lighten-4 center-on-small-only">Learn about the Material Design and our Project Team.</h4> 
      </div> 
      </div> 
     </div> 
     </div> 
    </main> 
    <!--Import jQuery before materialize.js--> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     Materialize.fadeInImage('#profilepic'); 
     Materialize.showStaggeredList('#staggered-list'); 
     }); 

    </script> 
    </body> 
</html>

的style.css

body { 
    background-image: url("../images/small_steps.png"); 
    background-color: #cccccc; 
} 

.go a:before, 
.go a:after { 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 
    -moz-transition: -moz-transform 0.3s, opacity 0.2s; 
    transition: transform 0.3s, opacity 0.2s; 
} 

.go a:before { 
    margin-right: 10px; 
    content: '['; 
    -webkit-transform: translate(20px); 
    -moz-transform: translate(20px); 
    transform: translate(20px); 
} 

.go a:after { 
    margin-left: 10px; 
    content: ']'; 
    -webkit-transform: translate(-20px); 
    -moz-transform: translate(-20px); 
    transform: translate(-20px); 
} 

.go a:hover:before, 
.go a:hover:after, 
.go a:focus:before, 
.go a:focus:after { 
    opacity: 1; 
    -webkit-transform: translate(0px); 
    -moz-transform: translate(0px); 
    transform: translate(0px); 
}

小提琴：https://jsfiddle.net/ugwwxk64/

任何幫助將非常感激。謝謝。

來源

2015-10-08 FewFlyBy

你可以創建一個精確的輸出演示？使用http://jsfiddle.net –

這將不可能沒有看你的CSS。你可以請加上這個問題。 –

你可以發佈你的CSS先生嗎？ –

僅當屏幕高於991px時纔會發生重疊。因此，您需要爲特定屏幕尺寸的main元素指定一些填充。

@media (min-width: 991px) { 
    main { 
    padding-left: 120px; 
    } 
}

Updated JSfiddle

來源

2015-10-08 06:42:16

哇！真棒夥計，謝謝！ – FewFlyBy

993px現在是大屏幕的斷點。 – Tomasz

@TomaszMularczyk謝謝，他們什麼時候變了？你能說出源嗎？ :) –

試試這個：

<div class="row"> 

    <div class="col s2"> 
     <ul id="staggered-list" class="side-nav fixed grey darken-4 blue-grey-text text-lighten-4 go"> 
    <br /> 
    <div style="text-align:center;" id="profilepic"> 
     <img src="./images/robertsoriano.jpg" alt="" class="circle responsive-img" width="200"> <br /> 
     Robert Soriano 
    </div> 
    <br /> <br /> 
    <li><a class="grey-text text-lighten-2" href="#"><i class="fa fa-user fa-2x fa-fw"></i>Home</a></li> 
    <li><a id="links" class="pink-text lighten-2" href="#"><i class="fa fa-terminal fa-2x fa-fw"></i>Projects</a></li> 
    <li><a id="links" class="green-text text-lighten-2" href="#"><i class="fa fa-bar-chart fa-2x fa-fw"></i>Skills</a></li> 
    <li><a id="links" class="yellow-text text-lighten-2" href="#"><i class="fa fa-graduation-cap fa-2x fa-fw"></i>Education</a></li> 
    <li><a id="links"class="blue-text text-lighten-2" href="#"><i class="fa fa-code fa-2x fa-fw"></i>Source Codes</a></li> 
    </ul> 
    </div> 

    <div class="col s10">

一些內容......

來源

2015-10-08 19:20:40 dennieru

我已經更新了它：https://jsfiddle.net/ugwwxk64/24/

這是我包括在你的代碼的代碼：

<style> 
    body 
    { 
     padding-left: 240px; 
    } 
    @media only screen and (max-width : 992px) 
    { 
    body 
    { 
     padding-left: 0; 
    } 
    } 
</style>

MaterializeCSS的sideNav的默認寬度爲240像素。因此，我添加了填充 - 左：240px;在表示將內容從左邊移動240px的身體中。然後，如果屏幕尺寸小於991px，@media only屏幕和（max-width：992px）隱藏將填充左側重寫爲0。 :)

來源

2016-10-25 11:00:24 SZMN

實現CSS Sidenav和內容

回答

相關問題