Блог

Главная - Вопросы по программированию - Отрегулируйте процент во вложенных подразделениях, чтобы он соответствовал системе с 12 столбцами

Отрегулируйте процент во вложенных подразделениях, чтобы он соответствовал системе с 12 столбцами

#css #flexbox #grid

#css #flexbox #сетка

Вопрос:

У меня есть следующая структура сайта, которая соответствует системе с 12 столбцами, использующей flexbox:

введите описание изображения здесь

По сути, это меню, боковая панель и тип контента сайта. Ширина отдельного столбца в системе с 12 столбцами составляет 8,3333%. Внутри содержимого div есть два вложенных content-left и content-right divs.

Мой вопрос в том, можно ли установить flex-basis свойство content-left и content-right divs, чтобы они точно соответствовали системе 12 col ( content-right div начинается там, где начинается пункт меню «Проекты»)?

Как бы я ни старался, я, кажется, не понимаю правильно. Например, установка .content-left { flex-basis: 25% } и .content-right { flex-basis: 50% } не дает желаемых результатов, потому что эти подразделения вложены в содержимое div, которое измеряет 75%, а не 100% ширины.

Любая помощь будет оценена.

PHP:

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Projects</li>
                <li>Contact</li>
            </ul>
        </div>
        <div class="main">
            <div class="sidebar">
            </div>
            <div class="content">
                <div class="content-left">
                </div>
                <div class="content-right">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

 .page {
    max-width: 1440px;
    margin: 0 auto;
}

.menu ul {
    display: flex;
}

.menu li {
    flex-basis: 25%;
}

.main {
    display: flex;
}

.sidebar {
    flex-basis: 25%;
}

.content {
    display: flex;
    flex-basis: 75%;
}

.content-left {
    flex-basis: ???%;
}

.content-right {
    flex-basis: ???%;
}

Ответ №1:

Это должно быть 1/3 и 2/3 (9 столбцов, которые вы разделите на 3 и 6)

 .page {
  max-width: 1440px;
  margin: 0 auto;
}

.menu ul {
  display: flex;
  padding:0;
}

.menu li {
  flex-basis: 25%;
  list-style:none;
  outline:1px solid red;
}

.main {
  display: flex;
}

.sidebar {
  flex-basis: 25%;
  background:pink;
}

.content {
  display: flex;
  flex-basis: 75%;
  height:50px
}

.content-left {
  flex-basis: calc(1/3 * 100%);
  background:red;
}

.content-right {
  flex-basis: calc(2/3 * 100%);
  background:blue;
} 
 <div class="page">
  <div class="menu">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Projects</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="main">
    <div class="sidebar">
    </div>
    <div class="content">
      <div class="content-left">
      </div>
      <div class="content-right">
      </div>
    </div>
  </div>
</div>