导航文章和宽度的总和是100％，但保留到新行

Question

我有一个HTML页面，其中有：标头，导航，文章和旁边。 我希望顶部的标题为一个栏，而导航，文章和旁边的为3个列。当我写css时，我把导航的边距和宽度，文章和一律设为100％，但全屏显示为第三列，但是当我调整屏幕大小时换到新行。我读到问题是空格，并且我尝试删除了空格，但是它不起作用。我将身体屈曲，它起作用了，但它只用了4列（标题，导航，文章和旁边）完成了一行。在这一点上，我尝试使用div作为nav，article和aside的容器，并将其显示为display：flex，但它不起作用。我不再做什么。

这里是HTML和CSS代码

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
}

<nav>
            <a class="active" href="index.html">Homepage</a>
        </nav>
        <article>
            <h1>Hai bisogno di ripetizioni?</h1>
            <h2>Controlla subito le disponibilit&agrave; qui sotto:</h2>
            <div id="listAvailable"></div>
        </article>
        <aside>
            Filtra le disponibili&agrave;:<br>
            Data<br>
            <div class="filter" id="days"></div>
            Materia<br>
            <div class="filter" id="subjects"></div>
            <button onclick="filterAvailable()">Filtra</button>
        </aside>

编辑：下面的答案是正确的解决方案，如果它不能立即生效，请尝试删除缓存和历史记录，因为这是在我尝试发布帖子时它不起作用的原因。无论如何，我必须增加身高：100％；放在一边并导航以使它们包装内容，否则它们的高度将与div.flex的高度匹配（这很烦人）。

EDIT2：还有其他使站点响应的CSS代码，使用此解决方案无效。完整的CSS代码是：

body {
    background-image: url(../img/bg.gif);
    margin: 0;
    padding: 0;
}

header {
    margin-bottom: 15px;
    padding: 20px 10px;
    background-image: url(../img/header2.gif);
    overflow: hidden;
}

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
    height: 100%;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
    height: 100%;
}

.flex{
    display:flex;
}

header img.logo {
  font-size: 25px;
  font-weight: bold;
}

#formLogin {
  float: right;
}

nav a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
    text-align: center;
}

nav a.active {
    background-color: #00bff0;
    color: white;
}

nav a:hover:not(.active) {
    background-color: #555;
    color: white;
}

/* Add media queries for responsiveness*/
@media screen and (max-width: 700px) {
    article { 
        margin-top: 20px;
        min-width: 550px;
    }
    nav {
        align-items: center;
        width: 100%;
        height: auto;
        position: relative;
    }
    nav a{
        text-align: center;
        height: auto;
        float: left;
    } 
    
}

@media screen and (max-width: 500px) {
    header {
        align-items: center;
    }
    
    #formLogin {
        float: none;
    }
}

@media screen and (max-width: 400px) {
    nav a {
        text-align: center;
        float: none;
    }
} 

要使CSS仍能响应，您必须在最大的@media中添加此CSS代码（较小的@media会继承它）：

.flex {
        display: block;
    }

我希望此修改可以对以后的人有所帮助

Answer 1

如果这不是答案，请用图片显示您想要的内容。

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
}

.flex{
  display:flex;
}

<div class="flex">
<nav>
            <a class="active" href="index.html">Homepage</a>
        </nav>
        <article>
            <h1>Hai bisogno di ripetizioni?</h1>
            <h2>Controlla subito le disponibilit&agrave; qui sotto:</h2>
            <div id="listAvailable"></div>
        </article>
        <aside>
            Filtra le disponibili&agrave;:<br>
            Data<br>
            <div class="filter" id="days"></div>
            Materia<br>
            <div class="filter" id="subjects"></div>
            <button onclick="filterAvailable()">Filtra</button>
        </aside>
  </div>