我怎样才能让我的<div>元素并排内联

Question

我有点努力想弄清楚这一点。我在 Flexbox 部分中有 3 个元素，该部分的 Flex 方向设置为列。

到目前为止，我的代码将我的 h2 元素集中在该部分的顶部，并将 3 个元素集中在中心列中，按照 flex-direction 的指示。请参阅随附的屏幕截图。 ()

HTML 代码

<section class="projects" id="projects">
        <h2>Projects</h2>
        <div class="proj1"><p>Placeholder</p></div>
        <div class="proj2"><p>Placeholder</p></div>
        <div class="proj3"><p>Placeholder</p></div>
    </section>

CSS代码

.projects {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;

}
/* projects placeholder */
.projects div {
    background-color: var(--secondary-color);
    border-radius: 20px;
    width: 360px;
    height: 480px;
    margin: 15px;
    color: var(--primary-color);

我需要做什么才能将我的 3 个元素并排放在 h2 下？

Answer 1

我相信你应该将这三个元素包装在它们自己的容器中（flexbox 应该可以）。

类似的东西

<section class="projects" id="projects">
    <h2>Projects</h2>
    <div class="projectsContainer">
        <div class="proj1"><p>Placeholder</p></div>
        <div class="proj2"><p>Placeholder</p></div>
        <div class="proj3"><p>Placeholder</p></div>
    </div>
</section>

然后将projectsContainer 的类添加到水平显示列表的CSS 文件中。