时间戳

首页 > 解决方案 > 将 div 拆分为多列而不破坏子元素

html - 将 div 拆分为多列而不破坏子元素

问题描述

我想将 CSS Columns 用于网站站点地图。我遇到的问题是封装在divs 中的部分正在跨列拆分。

描述问题的图像

我真正想要的如下所示，其中每个子元素都被强制放在单独的列中。我可以为此使用 CSS Grid ，但我也需要支持没有 CSS Grid的旧 IE 版本。

    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 或网格布局的唯一选择吗？有什么办法可以使用多列布局来实现这一点，以保持与旧浏览器的向后兼容性？

标签： htmlcssflexboxcss-multicolumn-layout

解决方案

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

推荐阅读