内容出现在左侧栏下方，而不是它旁边
问题描述：
我想创建一个模板包含标题，左侧边栏，容器和页脚，根据屏幕的宽度和高度可以调整大小。内容出现在左侧栏下方，而不是它旁边
左侧边栏包含菜单和子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/
这究竟是怎么样子：
它应该看起来：
答
你引用在你的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>
谢谢您的快速答复，我已经做了你所说的话，但同样的问题我已经更新我的职务 – Julie
@Julie你改变了侧边栏的宽度为35％，但您的内容宽度为80％。 80 + 35 = 115％，所以这是行不通的。我将您的内容更改为65％，并且适用于我的答案。 –
你是对的我现在改变了它，它看起来像照片（我已经更新它现在的样子） – Julie