如何設置兒童事業部與設備寬度100vw當具有寬度父DIV：80vw

.parent { 
 
    width: 80vw; 
 
    height: 200px; 
 
    background-color: red; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.child { 
 
    width: 100vw; 
 
    height: 100px; 
 
    background-color: blue; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

我該如何調整中央具有較小的寬度孩子div當父母div然後child？如果父母div的寬度爲80vw，如何設置子設備div與設備寬度的100vw？

來源

2017-07-28 D V Yogesh

嗨約傑什。我對你想達到的目標有點困惑。請問父母是1024px，而孩子是100％的屏幕？這聽起來像你可能需要一個不同的結構，從而你有一個100％的屏幕父母，然後是兩個孩子。一個是1024像素，一個是100％。我是否正確理解這一點？ – MegaTron

@ - 以上代碼中的MegaTron，子div向右側溢出，我想將子div中心對齊到設備寬度 –

如果這是您正在嘗試做的事情，請將父母居中，然後使用相對位置和負數左值居中。

.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    margin: 0 auto; /* center the parent in the screen */ 
 
} 
 

 
.child { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 100px; 
 
    background-color: blue; 
 
    /* center the child using a negative left */ 
 
    /* left: calc(50% - 50vw); */ 
 
    /* or */ 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

來源

2017-07-28 11:10:46

我希望如上所述的輸出，左出：calc（50％ - 50vw）;將無法在移動瀏覽器中工作，我試過 –

@DVYogesh爲什麼不呢？還有其他方法可以集中。我會再添加一個。 –

即使我已經嘗試了transform：translateX（-50％）;在移動瀏覽器中沒有用處，看起來不錯 –

的子元素只需設置margin-left: -10vw;。

.parent { 
 
    width: 80vw; 
 
    height: 200px; 
 
    background-color: red; 
 
    margin:auto; 
 
} 
 

 
.child { 
 
    width: 100vw; 
 
    height: 100px; 
 
    background-color: blue; 
 
    margin-left: -10vw; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

來源

2017-07-28 11:16:22

如何設置兒童事業部與設備寬度100vw當具有寬度父DIV：80vw

回答

相關問題