导航文章和旁边的宽度总和为 100%，但旁边转到新行

Question

我有一个 HTML 页面，其中有：header、导航、文章和旁白。我希望顶部的 header 作为栏，导航、文章和旁边作为 3 列。当我写 css 时，我将 nav、article 和 aside 的边距和宽度放在一起，总和为 100%，但在全屏上作为第三列放置，但当我调整屏幕大小时，屏幕会转到新行。我读到问题是空格，我试图删除它们但它不起作用。我将 body 设置为 flex 并且它起作用了，但是它用 4 列（header、导航、文章和旁边）做了一行。在这一点上，我尝试使用 div 作为导航、文章和旁边的容器并将其放入 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>

编辑：下面的答案是正确的解决方案，如果它不起作用，请立即尝试删除缓存和历史记录，因为这就是我之前尝试制作 post.无论如何，我必须添加 height: 100%;在 aside 和 nav 中让它们包裹它们的内容，否则它们的高度将与 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 代码（较小的将继承它）：

.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>

导航文章和旁边的宽度总和为 100%，但旁边转到新行

nav article and aside widths sum is 100% but the aside goes to new line

html

css

width

responsive-design

responsive