文章/答案/技术大牛

发布

问向下移动卡片及其内容
EN

Stack Overflow用户

提问于 2018-10-05 08:53:54

回答 1查看 1.1K关注 0票数 0

I have been able to make an image protrude the top half of a card但图像是重叠的文本和其他图像。如果卡的上半部分包含图像的下半部分，而下半部分包含附加的文本、图像等，我如何将卡向下推？

这是我的CSS：

.card {
  margin-left: 30px;
  margin-right: 30px;
  width: auto;
  border-radius: 8px;
  position: relative;
  display: block;
  margin-top: 100px;
  overflow: visible;

  div {
    position: absolute;
    top: -95px;
    width: 100%;
    text-align: center;
  }


  img:not(.castImg) {
    width: 80%;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    display: block;
    margin: -100px auto 0;
  }
}

我正在尝试模仿这个设计：

html

css

ionic-framework

回答 1

Stack Overflow用户

发布于 2018-10-05 09:10:48

您必须为这些元素创建足够的空间，以便在它们重叠时彼此配合。

就我个人而言，我会将图像和卡片包装在一个div中，这样你就可以根据需要放置它们，并在每张卡片之间应用页边距底部来创建空间。但这将基于您的代码工作。

试试这个：

.card {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
    border-radius: 8px;

    position: relative;
    // height: 150px;
    display: block;
    margin-top: 350px; /* changed */
    overflow: visible;

    div {
        position: absolute;
        top: -95px;
        width: 100%;
        // z-index: 2;
        text-align: center;
    }


    img:not(.castImg) {
        width: 50%; /* changed */
        // margin: auto;
        border-radius: 8px;

        -webkit-box-shadow: 0 8px 6px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;


        display: block;
        // width: 128px;
        // height: 128px;
        // margin: 30px auto 0;
        margin: -200px auto 0; /* changed */
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52656916

复制

相似问题

问向下移动卡片及其内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向下移动卡片及其内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向下移动卡片及其内容
EN