Как выровнять div влево и вправо HTML / CSS без каких-либо рамок - PullRequest
Новая
       1

Как выровнять div влево и вправо HTML / CSS без каких-либо рамок

0 голосов
/ 18 марта 2020

В моем случае я хочу реализовать две боковые навигационные панели как правую и левую.

На приведенном выше изображении поясняется вывод, который я хочу get

Письменные HTML и CSS файлы упомянуты ниже. 

:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --bg-color: #23232e;
}

body {
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}

main {
  margin-left: 16rem;
  margin-right: 16rem;
  padding: 1rem;
}

.navbar-left {
  position: fixed;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}

.navbar-right {
  position: fixed;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}
<nav class="navbar-left">
  <h1>
    Left Left Left Left Left Left Left Left Left Left Left Left Left Left
  </h1>
</nav>

<main>
  <h1>
    Center Center Center Center Center Center Center Center Center
  </h1>
</main>

<nav class="navbar-right">
  <h1>
    Right Right Right Right Right Right Right Right Right Right Right
  </h1>
</nav>

После запуска над выводом, перекрытие правой навигационной кнопки влево.

enter image description here Пожалуйста, помогите мне решить эту проблему без каких-либо рамок .

Ответы [ 3 ]

0 голосов
/ 18 марта 2020

Проверьте это, по крайней мере, это может помочь вам. 

:root {
    font-size: 16px;
    font-family: 'Open Sans';
    --bg-color: #23232e;
  }

  body {
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;        
  } 

  .navbar-left {
    position: fixed;
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;
  }
   main {
     margin-left:12rem; 
    padding: 1rem;
    height:100vh;
    width: 46rem;
  }

  .navbar-right {
    position:fixed;
    margin-left:58rem;
    background-color: var(--bg-color);
    float:right;
    overflow: scroll;
    height: 100vh;
    width: 16rem;
    top:0;
  }
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="style.css" />
        <link
          href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>
        <nav class="navbar-left">
          <h1>
              Left Left Left Left Left Left Left Left Left Left Left Left Left Left
          </h1>
        </nav>

        <main>
            <h1>
                Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center 
            </h1>
        </main>

        <nav class="navbar-right">
            <h1>
                Right Right Right Right Right Right Right Right Right Right Right
            </h1>
        </nav>

      </body>
</html>
0 голосов
/ 18 марта 2020

Вместо использования position: fixed; используйте position: absolute;, затем вы можете добавить left: 0px; top:0px; для левого элемента и right: 0px; top:0px; для правого элемента.

следующим образом: 

  .navbar-left {
    /* position: fixed; */
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;

    position: absolute;
    left: 0px;
    top:0px;

  }

  .navbar-right {
    /* position: fixed; */
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;

    position: absolute;
    right: 0px;
    top:0px;

  }
0 голосов
/ 18 марта 2020

Вы можете использовать flex для этого. В моем примере я сделал так, чтобы был контейнер с display flex, если это макет для всех ваших страниц, вы можете добавить стиль контейнера к телу, если хотите. Боковые панели теперь имеют тот же класс, поскольку они используют тот же стиль. Вопрос? Надеюсь, это поможет. 

:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --bg-color: #23232e;
}

body {
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

main {
  flex-grow: 1;
  margin-left: 16rem;
  margin-right: 16rem;
  padding: 1rem;
}

.navbar {
  flex-shrink: 0;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}
<div class="container">
  <nav class="navbar">
    <h1>
      Left Left Left Left Left Left Left Left Left Left Left Left Left Left
    </h1>
  </nav>

  <main>
    <h1>
      Center Center Center Center Center Center Center Center Center
    </h1>
  </main>

  <nav class="navbar">
    <h1>
      Right Right Right Right Right Right Right Right Right Right Right
    </h1>
  </nav>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...