html - 使用 nth-of-type 对齐图像

Question

我正在尝试对齐两张图片，一张在 div 中页面的两侧，虽然我之前使用过 nth-of-type 来处理这种事情，但我似乎无法让它工作现在!这些图像在容器的左上角一个接一个地叠放。这些不应该需要 float ，但是当我仍然无法让它工作时，我添加它很明显我做错了什么。

div.TitleHeader {
    width: inherit;
    position: relative;
    margin-bottom: 50px;
}

.TitleHeader img {
    position: absolute;
    top: 0;
}

.TitleHeader img:nth-of-type(1) {
    clear: both;
    float: left;
    left: 0;
}

.TitleHeader img:nth-of-type(2) {
    clear: both;
    float: right;
    right: 0;
}

<div class="TitleHeader">
    <div><img src="/images/image1.jpg" alt="Image 1"></div>
    <div><img src="/images/image2.jpg" alt="Image 2"></div>
</div>

Answer 1

为 TitleHeader 编写以下 css 代码。删除子项的 CSS 代码。

 .TitleHeader {
     display:flex;
     justify-content:space-between;
}