绝对定位的孩子应该在其大小相同，因为我调整屏幕宽度320px和767px之间的屏幕大小

-2

我有一个父div header-mobile-banner，和一个子绝对定位的子div header-mobile-graydiv。我希望这两个div的大小与im在320px和767px的屏幕宽度（响应）之间调整屏幕大小相同。这两个div都应该有回应。绝对的孩子div应该跟随其父母的大小。绝对定位的孩子应该在其大小相同，因为我调整屏幕宽度320px和767px之间的屏幕大小

@media screen and (min-width:320px) and (max-width:767px) { \t 
 
    #myCarousel {display: none;} 
 
    .carousel {display: none;} 
 
    .header-mobile-banner {width: 100%; height: 663.31px; padding: 0; top: 0; background-image: url("../img/head_banner.jpg"); background-repeat: no-repeat;background-size: contain;} 
 
    .header-mobile-graydiv {background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; bottom: 0;} 
 
    .header-mobile-graydiv h3 {font-size: 50px;} 
 
    .header-mobile-graydiv h1 {font-size: 92px;} 
 
    .header-mobile-graydiv h4 {font-size: 39px;} 
 
    .header-mobile-graydiv p {font-size: 20px;} 
 
}

<div class="header-mobile-banner"> 
 
    <div class="header-mobile-graydiv"> 
 
    <h3 class="font-GaramondPremierePro white">WELCOME TO</h3> 
 
    <h1 class="font-GreatVibes white">hello world</h1> 
 
    <h4 class="font-GaramondPremierePro white">hello world</h4> 
 
    <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim</p> 
 
    </div> 
 
</div>

来源

2017-10-21 benok

...什么不行？你的问题没有问题。 –

等待虐待编辑:) – benok

我把它的问题是在标题暗示。您的家长DIV应该定位在儿童DIV绝对定位上才能正常工作。尝试在父级上设置position: relative;。孩子DIV应该有overflow套，请尝试auto或scroll。还要注意，0值不需要单位。有关W3的官方文档值得一读。

来源

2017-10-21 13:31:05

谢谢，但我解决了我的概率直接在图像上放一个类:) – benok

@benok无论你现在在你的代码库中，只需从你的CSS中删除底部：0，你会看到你想要的结果。虽然这不是实现这一目标的正确方法。

来源

2017-10-21 13:33:59 Waqas

谢谢，但我解决了我的概率直接放在图像上的类:) – benok

绝对定位的孩子应该在其大小相同，因为我调整屏幕宽度320px和767px之间的屏幕大小

回答

相关问题