Question

我想创建一个包含标题，左侧边栏，容器和页脚的模板，这些模板可根据屏幕的宽度和高度进行调整。

左侧边栏包含一个菜单和子菜单，我的问题是我无法将容器放在左侧边栏后面总是出现在它下面

我根据答案更新了我的帖子，但问题仍然存在！

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/

它看起来如何：

应该看起来：

Answer 1

您在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>

内容显示在左侧栏下方而不是旁边

1 个答案: