Разбить div на несколько столбцов, не разбивая дочерние элементы

Question

Я хочу использовать CSS-столбцы для карты сайта.У меня проблема в том, что разделы, заключенные в div, разделяются на столбцы.

То, что я на самом деле хочу, показано ниже,где каждый дочерний элемент вынужден находиться в отдельном столбце.Я мог бы использовать CSS Grid для этого, но мне нужно также поддерживать более старую версию IE, чтобы не имел CSS Grid .

    GENERAL    |    SUBJECTS    |       FOO      |       BAR      |
- Log in       | - Log in       | - Log in       | - Log in       |
- Register     | - Register     | - Register     | - Register     |
- Contact      | - Contact      | - Contact      | - Contact      |
- ...          | - ...          | - ...          | - ...          |

Каждый столбец выше содержится в одном родительском элементе div (как показано ниже в HTML-коде).

#sitemap {
    min-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-columns: 5 175px;
    -moz-columns: 5 175px;
    columns: 5 175px;
}

#sitemap a[href] {
    text-decoration: none;
    align-content: baseline;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

#sitemap a[href]:hover {
    border-bottom-color: #000;
}

#sitemap a[href] * {
    line-height: 1.1rem;
    vertical-align: middle;
}

#sitemap ul {
    list-style: none;
}

<div id="sitemap">
  <div class="section">
    <h6 class="mdc-typography--headline6">General</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Blog
        </a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h6 class="mdc-typography--headline6">Subjects</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Blog
        </a>
      </li>
    </ul>
  </div>
</div>

Является ли единственным вариантом использовать флексбокс или сетку?Можно ли как-нибудь использовать многостолбцовый макет, чтобы добиться обратной совместимости со старыми браузерами?

Answer 1

Вы можете сделать это без flexbox.

#sitemap {
  min-width: 100%;
}

#sitemap a[href] {
  text-decoration: none;
  align-content: baseline;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

#sitemap a[href]:hover {
  border-bottom-color: #000;
}

#sitemap a[href] * {
  line-height: 1.1rem;
  vertical-align: middle;
}

#sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sitemap div {
position: relative;
float: left;
width: 18%;
margin: 0 1.5% 0 0;
padding: 0;
}

<div id="sitemap">

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

  <div>
    <h6>Section Title</h6>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>

</div>

Answer 2

Использование стиля display: flex; для #sitemap.

Пример фрагмента:

#sitemap {
  display: flex;
}

h6 {
  margin: 10px 0;
}

#sitemap .section {
  margin: 0 10px;
}

#sitemap a[href] {
    text-decoration: none;
    align-content: baseline;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

#sitemap a[href]:hover {
    border-bottom-color: #000;
}

#sitemap a[href] * {
    line-height: 1.1rem;
    vertical-align: middle;
}

#sitemap ul {
    list-style: none;
    padding: 0;
}

<div id="sitemap">
  <div class="section">
    <h6 class="mdc-typography--headline6">General</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1"> Blog
        </a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h6 class="mdc-typography--headline6">Subjects</h6>
    <ul>
      <li>
        <a href="/login.php" class="mdc-typography--body1">
        Log in
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Register
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Contact
        </a>
      </li>
      <li>
        <a href="/getstarted.php" class="mdc-typography--body1">
        Blog
        </a>
      </li>
    </ul>
  </div>
</div>