內容出現在左側欄下方，而不是它旁邊

我想創建一個模板包含標題，左側邊欄，容器和頁腳，根據屏幕的寬度和高度可以調整大小。內容出現在左側欄下方，而不是它旁邊

左側邊欄包含菜單和子menues，我的問題是，我不能把容器內的左側邊欄後，它總是出現在它下面

我根據答案，但已經更新我的帖子問題依然存在！

layout.html.twig

<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>{% block title %}Welcome!{% endblock %}</title> 
     {% block stylesheets %} 
      {% stylesheets 'css/style.css' filter='cssrewrite' %} 
      <link rel="stylesheet" href="{{ asset_url }}" /> 
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
      {% endstylesheets %} 
     {% endblock %} 
    </head> 

    <body> 
     <header>My header1</header> 
     <section class="sidebar-left"> 
<nav class="navigation"> 
    <ul class="mainmenu"> 
    <li><a href="">Forms User</a></li> 
    <li><a href="">Charts</a></li> 
    <li><a href="">Managment</a> 
     <ul class="submenu"> 
     <li><a href="">Add</a></li> 
     <li><a href="">Delete</a></li> 
     <li><a href="">Edit</a></li> 
     </ul> 
    </li> 
    <li><a href="">Logout</a></li> 
    </ul> 
</nav> 
    </section> 
     <section class="content"> 
      {% block content %} 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
      {% endblock %} 
     </section> 

     <footer>My footer</footer> 
    </body> 
</html>

的style.css：

html, body { 
    font-family: Arial, Helvetica, sans-serif; 
    height: 100%; 
    width: 100%; 
} 
.sidebar-left 
{ 
    float: left; 
    width:35%; 
} 

/* define a fixed width for the entire menu */ 
.navigation { 
     width:35%; 
     float:left; 
} 

/* reset our lists to remove bullet points and padding */ 
.mainmenu, .submenu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

/* make ALL links (main and submenu) have padding and background color */ 
.mainmenu a { 
    display: block; 
    background-color: #CCC; 
    text-decoration: none; 
    padding: 10px; 
    color: #000; 
} 

/* add hover behaviour */ 
.mainmenu a:hover { 
    background-color: #C5C5C5; 
} 


/* when hovering over a .mainmenu item, 
    display the submenu inside it. 
    we're changing the submenu's max-height from 0 to 200px; 
*/ 

.mainmenu li:hover .submenu { 
    display: block; 
    max-height: 200px; 
} 

/* 
    we now overwrite the background-color for .submenu links only. 
    CSS reads down the page, so code at the bottom will overwrite the code at the top. 
*/ 

.submenu a { 
    background-color: #999; 
} 

/* hover behaviour for links inside .submenu */ 
.submenu a:hover { 
    background-color: #666; 
} 

/* this is the initial state of all submenus. 
    we set it to max-height: 0, and hide the overflowed content. 
*/ 
.submenu { 
    overflow: hidden; 
    max-height: 0; 
    -webkit-transition: all 0.5s ease-out; 
} 

.content { 

    display: flex; 
    width: 65%; 

    /* Direction of the items, can be row or column */ 
    flex-direction: column; 

    background-color:#0CF; 
} 

header{ 
    height: 10%; 
    background-color:#D3D3D3; 
} 
footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color:#666; 
    text-align: center; 
} 

main { 
    flex: 1; 
}

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

這究竟是怎麼樣子：

它應該看起來：

來源

2017-05-04 Julie

你引用在你的CSS類.sidebar-left，但該元素是一個ID。將.sidebar-left更改爲以使您的width: 20%生效。而且一定要關閉開口標記爲

* {box-sizing:border-box;} 
 

 
html, 
 
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
/* define a fixed width for the entire menu */ 
 

 
.sidebar-left { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 

 
/* reset our lists to remove bullet points and padding */ 
 

 
.mainmenu, 
 
.submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 

 
/* make ALL links (main and submenu) have padding and background color */ 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 

 
/* add hover behaviour */ 
 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 

 
/* when hovering over a .mainmenu item, 
 
    display the submenu inside it. 
 
    we're changing the submenu's max-height from 0 to 200px; 
 
*/ 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 

 
/* 
 
    we now overwrite the background-color for .submenu links only. 
 
    CSS reads down the page, so code at the bottom will overwrite the code at the top. 
 
*/ 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 

 
/* hover behaviour for links inside .submenu */ 
 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 

 
/* this is the initial state of all submenus. 
 
    we set it to max-height: 0, and hide the overflowed content. 
 
*/ 
 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    width: 80%; 
 
    /* Direction of the items, can be row or column */ 
 
    flex-direction: column; 
 
    background-color: #0CF; 
 
} 
 

 
header { 
 
    height: 10%; 
 
    background-color: #D3D3D3; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #666; 
 
    text-align: center; 
 
} 
 

 
main { 
 
    flex: 1; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>{% block title %}Welcome!{% endblock %}</title> 
 
    {% block stylesheets %} {% stylesheets 'css/style.css' filter='cssrewrite' %} 
 
    <link rel="stylesheet" href="{{ asset_url }}" /> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> {% endstylesheets %} {% endblock %} 
 
</head> 
 

 
<body> 
 
    <header>My header1</header> 
 
    <section class="sidebar-left"> 
 
    <nav class="navigation"> 
 
     <ul class="mainmenu"> 
 
     <li><a href="">Forms User</a></li> 
 
     <li><a href="">Charts</a></li> 
 
     <li><a href="">Managment</a> 
 
      <ul class="submenu"> 
 
      <li><a href="">Add</a></li> 
 
      <li><a href="">Delete</a></li> 
 
      <li><a href="">Edit</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">Logout</a></li> 
 
     </ul> 
 
    </nav> 
 
    </section> 
 
    <section class="content"> 
 
    {% block content %} 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    {% endblock %} 
 
    </section> 
 

 
    <footer>My footer</footer> 
 
</body> 
 

 
</html>

來源

2017-05-04 15:55:40

謝謝您的快速答覆，我已經做了你所說的話，但同樣的問題我已經更新我的職務 – Julie

@Julie你改變了側邊欄的寬度爲35％，但您的內容寬度爲80％。 80 + 35 = 115％，所以這是行不通的。我將您的內容更改爲65％，並且適用於我的答案。 –

你是對的我現在改變了它，它看起來像照片（我已經更新它現在的樣子） – Julie

內容出現在左側欄下方，而不是它旁邊

回答

相關問題