相对于父项的位置图标 Div CSS React

Question

我创建了以下组件来显示一个圆形图像，图像右下角安装了一个 CheckMark 图标。

我在一行中显示了这些组件的多个实例 - 例如一行中有 5 张图片，每张图片旁边都有一个复选标记。我使用 offset 参数来确定 Checkmark

的左侧位置

只要图像在一行中就可以正常工作，但是如果它们分成两行，复选标记不会相应地迁移到第二行，而是保留在第一行的右侧第一行的图片。

这是由我为 left CSS 属性使用的 offset 值引起的 - 例如，如果我在一行中有 3 个图像，并且第二行中的 2 个图像 - 第 4 个偏移量（应为 0）将改为 280.

有没有办法让 CheckMark 相对于 div 而不是整个页面定位？

const StyledImage = styled.img`
    border-radius: 50%;
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    object-fit: cover;
    border: ${props => props.empty && '2px solid #555'};
`;

const CheckMark = styled(Icon)`
    position: absolute;
    bottom: 0;
    left: ${props => props.offset + 45}px;
    right: 0;
    top: 45px;
`;

export default ({ coverImage, index, empty }) => {
    const offset = index * 70;
    return empty ? (
        <StyledImage empty />
    ) : (
        <div>
            <StyledImage src={coverImage} alt="cover image" />
            <CheckMark
                offset={offset}
                name="check circle"
                color="green"
                size="large"
            />
        </div>
    );
};

Answer 1

是的，你可以。你想把 CheckMark 组件放在右下角 div 把两个组件包裹起来对吗？

您不需要根据需要计算位置偏移量。如下所示。

你应该制作一个容器组件来包裹这两个组件并根据需要定位它们。

让我举个例子。

const ImageContainer = styled.div`
    display: flex;
    flex-direction: column;
`;

const CheckMark = styled(icon)`
    display: flex;
    justify-content: end;
    align-items: center;
    // if you want some space around CheckMark, add "padding" here
`;

// rendering...
<ImageContainer>
    <StyledImage />
    <CheckMark />
</ImageContainer>

希望你能找到解决办法:D

相对于父项的位置图标 Div CSS React

Position Icon Relative to Parent Div CSS React

css

css-position

reactjs

styled-components