CSS calc（）;定位div

我正在嘗試創建一個寬度和視圖寬度的37％的高度的div。CSS calc（）;定位div

我想讓div居中居中，所以我試圖佔用50％的視圖寬度並減去37％的值。

然後我希望div在父div之外佔50％。它基本上是一張帶有個人資料圖片的封面照片。爲了強制business-cover-wrapper之外的business-cover-logo，我想到的唯一方法是乘以負數，最下面的位置需要是負數。

希望這是有道理的。任何幫助，將不勝感激。

謝謝。

<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'); 
    } 
}

來源

2017-01-30 Kainan

我編輯我的回答瞭解後，你需要什麼：要定位你的標誌，使用position: relative並設置bottom爲負值，並以中心標識使用left: calc(50% - 100px)其中100px是您的標誌的一半尺寸。

HTML

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

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); 
}

Example

而且，沒有嵌套類的CSS，你應該括號外移動.business-cover-logo

來源

2017-01-30 06:48:16

CSS calc（）;定位div

回答

相關問題