css - 使用显示表或类似的，我怎样才能添加一个中断来形成另一行？

Question

我正在使用 display: table 在 div 中创建相等的行，类似于 flex。 Flex 目前对我来说似乎太复杂了。尽管如此，这工作正常，但我怎样才能休息一下，以便它在下面制作另一组 3？

CSS:

#footerArea #footerContent #footerCol {
    display:table;
    width:100%;
}

#footerCol span {
    display:table-cell;
    text-align:left;
}

HTML:

 <footer>
        <section id="footerArea">
            <div id="footerContent">
                <div id="footerCol">
                    <span>
                        <h2>Company Info</h2>
                        Company
                    </span>
                    <span>
                        <h2>Company Info</h2>
                        Company
                    </span>
                    <span>
                        <h2>Company Info</h2>
                        Company
                    </span>
                </div>
            </div>
        </section>
    </footer>

正如我所说，这是一种享受，但如果我继续 span 元素，它只会将它们全部放在一行中。

如果可能的话，我希望它像这样:

提前致谢!

Answer 1

如果您想要表格布局，请使用表格结构。创建另一个“行”div。

此外，您的 HTML 无效。 span 元素不能包含 block 级元素，如 h2。只需使用一个 div。

#footerArea #footerContent {
  display: table;
  width: 100%;
}

#footerArea #footerContent .footerCol {
  display: table-row;
}

.footerCol>div {
  display: table-cell;
  text-align: left;
}

<footer>
  <section id="footerArea">
    <div id="footerContent">
      <div class="footerCol">
        <div>
          <h2>Company Info</h2> Company
        </div>
        <div>
          <h2>Company Info</h2> Company
        </div>
        <div>
          <h2>Company Info</h2> Company
        </div>
      </div>
      <div class="footerCol">
        <div>
          <h2>Company Info</h2> Company
        </div>
        <div>
          <h2>Company Info</h2> Company
        </div>
        <div>
          <h2>Company Info</h2> Company
        </div>
      </div>
    </div>
  </section>
</footer>