Question

我有一个宽度为50％的图像和一个文本为65％的div，因为我希望div内的标题与图像重叠。但是，问题在于我不希望div中的其他内容与图像重叠 - 只是标题。我希望文本和按钮位于不在其上的图像旁边。但我似乎无法弄明白。

这是一个Codepen：https://codepen.io/tayanderson/pen/EbJZxy

.project {
    height: 75vh;
    margin: 15em 0;
    position: relative;

    .project-info {
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 65%;
        height: 100%;
        right: 0;
        h2 {
            text-transform: initial;
            color: #eee;
        }
        p {
            font-weight: 300;
            color: #ccc;
            margin: 40px 0;
        }
        .project-desc {
            width: 70%;
            .button {display:inline-block;}
        }
    }

    .project-img {
        background-size: cover;
        background-position: center;
        height: 100%;
        -webkit-filter: grayscale(100%) brightness(50%);
        filter: grayscale(100%) brightness(50%);
        width: 51.3%;
    }

    a {text-decoration:none;
        color: #fff;}
    @media only screen and (max-width: 768px) {
        .project-info, .project-img {
            width: 100%;
        }
        .project-info {
            left: 0;
            padding: 0 20px;
            .project-desc>*{
                width: 100% !important;
                float: left !important;
            }
            p {display: none;}
        }
    }
}

Answer 1

我想我明白你在描述什么。而不是使用百分比来定位项目使用position：relative而不是浮动图像（记住将它放在流程中）。

检查一下： https://codepen.io/alexplummer/pen/eeoRmN

.project-info {
    display: inline-block;
    width: calc(50% - 10px);
    height: 100%;
    padding-left: 10px;
    ...
}
.project-img {
    width: 50%;
    float: left;
    ...
}

Answer 2

你可以尝试使用flexbox。

https://codepen.io/dakata911/pen/BmEpeB

.article {
  width: 60%;
  margin: 0 auto;
  display: flex;
}

.article__image,
.article__text {
  width: 50%;
}

.article__image {
  background: url('http://www.country1067.com/wp-content/uploads/sites/28/2017/07/logoImage_4.jpg') center center no-repeat;
  background-size: cover
}

.article__text {
  padding: 12px;
  background: #c3c3c3;
}

.article__text h2 {
  margin-left: -96px;
  color: #FFF;
  font-size: 40px;
}

Answer 3

为什么不将两个div设为50％并为project-info提供填充？您需要此属性才能正确执行div

中的填充

*{
  box-sizing:border-box;
}

这里有结果

https://codepen.io/marcosefrem/pen/BmERmY

将子div放在父div的左侧？

3 个答案: