导航文章和侧边宽度总和为 100%，但侧边换行

Posted 2023-03-06

【中文标题】导航文章和侧边宽度总和为 100%，但侧边换行

【英文标题】：nav article and aside widths sum is 100% but the aside goes to new line

【发布时间】：2019-05-13 23:22:24

【问题描述】：

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

编辑：下面的答案是正确的解决方案，如果它不能立即尝试删除缓存和历史记录，因为这是我之前尝试发帖时它不起作用的原因。无论如何，我必须添加 height: 100%;在 side 和 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;
    

我希望这个编辑可以帮助将来的人

【参考方案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>

【讨论】：

这是我之前尝试过的解决方案之一，反正现在可以了。也许它不仅适用于缓存问题。无论如何，我必须添加 height: 100%;在 side 和 nav 中让它们包裹它们的内容，否则它们的高度将与 div.flex 的高度匹配（这很烦人）。感谢您的帮助^^

我找到了一个解决方案，但如果你想看看 EDIT 尤其是第二个 :) 再次感谢