在不破坏子元素的情况下将 div 拆分为多列

Question

我想为网站站点地图使用 CSS 列。我遇到的问题是封装在 div 中的部分正在跨列拆分。

我真正想要的如下所示，其中每个子元素都被强制放在单独的列中。我可以为此使用 CSS 网格，但我也需要支持较旧的 IE 版本 don't have 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>

flexbox 或 grid 布局是唯一的选择吗？有什么方法可以使用多列布局来实现这一点，以保持与旧版浏览器的向后兼容性？

Answer 1

为 #sitemap 使用 display: flex; 样式。

示例片段：

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

Answer 2

您可以在没有 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>

在不破坏子元素的情况下将 div 拆分为多列

Split div into multiple columns without breaking child elements

html

css

flexbox

css-multicolumn-layout