时间戳

首页 > 解决方案 > 如何为重叠的图像设置样式

css - 如何为重叠的图像设置样式

问题描述

我正在开发一个产品信息页面，用户在该页面上单击产品，他应该获得产品图片、描述以及推荐产品下方

问题是当用户点击产品时，产品的图像超过了推荐的产品并改变了整个风格，对于某些产品来说，它工作得很好

这是它应该看起来的图像，非常适合某些产品

这是一些重叠并更改 UI 的产品的图像

实际上，在产品信息中，3个组件是一起嵌入显示的。

我试图降低下面的推荐产品，但它会影响主页推荐产品。

有什么解决办法吗

margin-top: 0.005rem;我尝试将其增加到 40，但它会影响主页样式。我不想要这个，在这个产品图像中，我试图减少图像质量的高度和宽度和宽度，对于某些产品，如移动设备，它看起来不太好

这是轮播边框CSS代码

export const CarouselBorder = styled(Heading)`
  border-bottom: 2px solid var(--secondary-color);
  margin-top: 0.005rem;
  margin-bottom: 0.3rem;
  padding-bottom: 3px;
`

这是图像的css代码：

    export const ImageGrid = styled.div`
  box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
  padding: 10px;
  width: 78%;`

标签： cssreactjs

解决方案

该clear属性用于指定浮动元素的哪一侧不允许浮动。它设置或返回元素相对于浮动对象的位置。如果元素可以水平放置在另一个浮动元素旁边的空间中。

句法：

clear: none|left|right|both|initial;

推荐阅读