Css 使用“显示表”或类似工具，如何添加分隔符以形成另一行？

我使用

display:table

在

div

中生成相等的行，类似于

flex

。Flex目前对我来说似乎太复杂了。尽管如此，这一切正常，但我如何才能使一个休息，使其成为另一组3下面

CSS:

HTML:

公司信息
单位
公司信息
单位
公司信息
单位

正如我所说的，这是一种享受，但如果我继续

span

元素，它只会将它们全部放在一行中

如果可能的话，我希望这样：

---

提前谢谢

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

此外，您的HTML是无效的<代码>span元素不能包含块级元素，如

h2

。就用一个div

#页脚区域#页脚内容{
显示：表格；
宽度：100%；
}
#footerArea#footerContent.footerCol{
显示：表格行；
}
.footerCol>div{
显示：表格单元格；
文本对齐：左对齐；
}

公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司

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

此外，您的HTML是无效的<代码>span元素不能包含块级元素，如

h2

。就用一个div

#页脚区域#页脚内容{
显示：表格；
宽度：100%；
}
#footerArea#footerContent.footerCol{
显示：表格行；
}
.footerCol>div{
显示：表格单元格；
文本对齐：左对齐；
}

公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司

使用flexbox，您可以这样做

.footerCol{
显示器：flex；
柔性包装：包装；
}
.footerCol>div{
弹性：1 1计算（100%/3）；
文本对齐：左对齐；
}

公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司

使用flexbox，您可以这样做

.footerCol{
显示器：flex；
柔性包装：包装；
}
.footerCol>div{
弹性：1 1计算（100%/3）；
文本对齐：左对齐；
}

公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司
公司信息公司

谢谢。请允许我问一下：

.footerCol>div

这一行中的

到底是什么意思？它是一个直接子选择器，因此只影响该父div的直接子div。谢谢。我可以问一下：

.footerCol>div

这行中的

到底是什么意思吗？它是一个直接子选择器，因此只影响作为该父div直接子级的div。

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

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

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