html - 制作两列，每列有 2 张图片

Question

我知道这是一个愚蠢的问题，但我正在创建一个与我的团队会面的页面，并且我想创建列（每列代表公司的不同部门），并且这些列中的每一个都有 2 张图片。它会在每张照片下显示员工的姓名。

HTML 是这样的：

<div class="profession">
    <h3>Management</h3>
    <div class="employee">
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe1</h6>
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe2</h6>
    </div>
</div>

<div class="profession">
    <h3>Developers</h3>
    <div class="employee">
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe3</h6>
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe4</h6>
    </div>
</div>

所以我的问题是如何在 CSS 中实现这一点？

标签： htmlcss

Answer 1

这是一个使用 Flexbox 的简单的两列布局：

<div class="row">
    <div class="profession column"><h3>Management</h3>...</div>
    <div class="profession column"><h3>Developers</h3>...</div>
</div>

然后在 CSS 中：

.row {
    display: flex;
}

.column {
    flex: 50%;
}