我想创建一个包含页眉、左侧边栏、容器和页脚的模板，它们可以根据屏幕的宽度和高度调整大小。
左侧边栏包含一个菜单和子菜单，我的问题是我不能将容器放在左侧边栏之后它总是出现在它下面
我已经根据答案更新了我的帖子，但问题仍然存在!
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>
样式.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;
}
fiddle :https://jsfiddle.net/naemcwsy/
这是它的样子:
它应该看起来:
最佳答案
您在 CSS 中引用类 .sidebar-left 但该元素是一个 ID。将 .sidebar-left 更改为 #sidebar-left 以使您的 width: 20% 生效。并确保关闭 #sidebar-left
* {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>关于html - 内容出现在左侧栏下方而不是旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43787623/