Расположение сетки перекрывается боковой панелью

ProgramBox

Расположение сетки перекрывается боковой панелью

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#html #css #layout #flexbox

Вопрос:

Я пытаюсь создать дизайн блога. Где мне требуется боковая панель , навигация , нижний колонтитул и область основного содержимого. Я создал навигацию сверху с некоторыми ссылками. Боковая панель с некоторым образцом текста. Я создал страницу с помощью flexbox и пытаюсь создать основную область содержимого с помощью сетки . Я планирую разделить сетку на три равные области и буду использовать несколько карточек, чтобы разместить там контент. Прямо сейчас основная область содержимого перекрывается с боковой панелью. Я не знаю, как это исправить. Я создал боковую панель , навигацию и область основного содержимого . Я использовал главную страницу с помощью flexbox, и мне нужно создать сетку в поле flex и разделить сетку на равные три столбца, в которые я могу поместить некоторое содержимое. моя сетка перекрывается с боковой панелью и полностью переходит на боковую панель. [![введите описание изображения здесь][1]][1]

Я включил изображение, чтобы объяснить, а также добавил код с JSfiddle для справки. [1]: https://i.stack.imgur.com/EsImd.png

 html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background-color: seashell;
}

#page {
  display: flexbox;
  height: calc( 100vh - 30px);
  flex-direction: column;
}

#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}

.content {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

.one {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.two {
  background-color: blue;
}

.three {
  background-color: purple;
}

.box {
  background-color: #444;
  grid-template-rows: 5;
  grid-template-columns: 10;
  color: #fff;
  border-radius: 5px;
  padding: 30px;
  font-size: 150%;
}

.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  align-items: baseline;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}

 <div id="header">
  <navbar>
    <ul class="nav-list">
      <li class="nav-item">
        <a 
          href="https://twitter.com/share?ref_src=twsrc^tfw" 
          class="twitter-share-button" 
          data-show-count="false"
        >Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </li>
      <li class="nav-item">
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">
          lang: en_US
        </script>
        <script type="IN/Share" data-url="https://www.linkedin.com"></script>
      </li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item">Login</li>
    </ul>
  </navbar>
</div>

<div id="page">
  <div id="sidebar">
    <div>
      My profile
    </div>
    <div>
      My interest
    </div>
  </div>
  <div id="content">
    <div class="one">
      one
    </div>
    <div class="one">
      two
    </div>
    <div class="one">
      three
    </div>
  </div>
</div>

1. @user3733831 Я создал новый вопрос со снимком экрана. Пожалуйста, помогите мне

2. Вы хотите, чтобы боковая панель и основной контент были рядом? Если да, используйте: ` #страница { дисплей: гибкий; высота: calc( 100vh — 30 пикселей); } ` Я удалил столбец flex-направление: и правильно установил свойство flex.

3. Если вы хотите использовать flex и / или сетку, вы можете сделать это с самого начала и избежать своего calc (). пример шаблона, который вы могли бы создать codepen.io/gc-nomade/pen/zYwLmON не стесняйтесь вдохновлять себя и использовать это.

Ответ №1:

Изменение стиля для #page селектора

 #page {
  display: flex; /*display:flex; not flexbox */
  height: calc( 100vh - 30px);
  flex-direction: row; /* Change flex-direction to column*/
}

И в зависимости от ваших требований добавьте ниже CSS в #content селектор

 #content {
  flex:1;
  display: grid;
  grid-template-columns: repeat(3,1fr)
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

Примечание. Вы использовали селектор классов . для содержимого. что и должно быть # . Проверить codepen.io ссылка

https://codepen.io/emmeiWhite/pen/GRmBQbR

Ответ №2:

Я обнаружил две проблемы:

display: flexbox является недействительным — это просто flex
в вашем контенте есть ID , но вы определили класс .content

Вы должны опустить flex-direction: column , если хотите, чтобы оба элемента соседствовали.

Между прочим: Если вы установите для всех трех элементов содержимого 40% значение ширины, у вас будет переполнение (3 x 40% = 120%)…

Рабочий пример: (я удалил неиспользуемые CSS-стили)

 html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background-color: seashell;
}

#page {
  display: flex;
  height: calc(100vh - 30px);
}

#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}

#content {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

.one {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  align-items: baseline;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}

 <div id="header">
  <navbar>
    <ul class="nav-list">
      <li class="nav-item">
        <a 
          href="https://twitter.com/share?ref_src=twsrc^tfw" 
          class="twitter-share-button" 
          data-show-count="false"
        >Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </li>
      <li class="nav-item">
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">
          lang: en_US
        </script>
        <script type="IN/Share" data-url="https://www.linkedin.com"></script>
      </li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item">Login</li>
    </ul>
  </navbar>
</div>

<div id="page">
  <div id="sidebar">
    <div>
      My profile
    </div>
    <div>
      My interest
    </div>
  </div>
  <div id="content">
    <div class="one">
      one
    </div>
    <div class="one">
      two
    </div>
    <div class="one">
      three
    </div>
  </div>
</div>