Навигация статьи и сумма ширины в сторону составляет 100%, но в сторону переходит на новую строку - PullRequest
Новая
       29

Навигация статьи и сумма ширины в сторону составляет 100%, но в сторону переходит на новую строку

0 голосов
/ 12 декабря 2018

У меня есть HTML-страница, где есть: заголовок, навигация, статья и прочее.Я хочу, чтобы верхний колонтитул был в виде столбца, а навигация, артикль и в виде 3 столбцов.Когда я писал css, я помещал поля и ширину nav, article и в сторону, сумма которых равна 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%;в aside и nav, чтобы заставить их обернуть содержимое, иначе их высота будет соответствовать высоте div.flex (что довольно раздражает).

РЕДАКТИРОВАТЬ2: Существовал другой код 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 по-прежнему реагировал, вы должны добавить этот код CSS в самом большом @media (меньшие будут его наследовать): 

.flex {
        display: block;
    }

Я надеюсь, что это изменение может кому-то помочь в будущем

1 Ответ

0 голосов
/ 12 декабря 2018

если это не ответ, пожалуйста, покажите, что вы хотите с изображением. 

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