Question

我试图创建一个宽度和高度为视图宽度37％的div。

我希望div在中间居中，所以我试图占据视图宽度的50％并减去37％的值。

然后我希望div在父div之外坐50％。它基本上是带有个人资料图片的封面照片。最低位置需要是负面的，以便在业务视图包装器之外强制业务覆盖标识，并且我能想到的唯一方法是乘以负数。

希望这是有道理的。任何帮助将不胜感激。

感谢。

<div class="business-view-cover">
    <div class="business-cover-logo"></div>
</div>

.business-view-cover {
    position: relative;
    height: calc(100vw * 0.5625);
    background-size: cover;
    background-position: center center;
    background-image: url('../images/business-cover-1.png');

    .business-cover-logo {
        position: absolute;
        --width-profile: calc(100vw * 0.37);
        --half-width: calc(var(--width-profile) / 2);
        --profile-bottom: calc(-1 * var(--half-width));
        bottom: calc(var(--profile-bottom) * -1);
        left: calc(50vw - var(--width-profile));
        width: var(--width-profile);
        height: var(--width-profile);
        border: 4px solid $e1-background-grey;
        border-radius: 1.6rem;
        background-size: cover;
        background-position: center center;
        background-image: url('../images/logo-cover-napa.png');
    }
}

使用固定值的示例。

.business-view-cover {
    position: relative;
    height: calc(100vw * 0.5625);
    background-size: cover;
    background-position: center center;
    background-image: url('../images/business-cover-1.png');

    .business-cover-logo {
        position: absolute;
        bottom: -7.65rem;
        left: calc(50vw - 7.65rem);
        width: 15.3rem;
        height: 15.3rem;
        border: 4px solid $e1-background-grey;
        border-radius: 1.6rem;
        background-size: cover;
        background-position: center center;
        background-image: url('../images/logo-cover-napa.png');
    }
}

Answer 1

我在了解了您的需求后编辑了我的答案：要定位徽标，请使用position: relative并将bottom设置为负值，并且为了使徽标居中，请使用{{1} } left: calc(50% - 100px)是徽标大小的一半。

HTML

100px

CSS

<div class="cover-photo">
    <div class="logo">
    </div>
</div>

Example

此外，CSS中没有嵌套类，您应该将.cover-photo{ width: 100%; margin: auto; border: 1px solid black; text-align: center; } .logo{ background-color: navy; width: 200px; height: 200px; position:relative; bottom: -100px; left: calc(50% - 100px); }移到括号

之外

CSS calc（）;定位div

1 个答案: