Question

我可以使用一些帮助，因为我是html编码的新手。无论如何，我做了一个带自举的旋转木马。旋转木马本身工作正常。但是在旋转木马中放置一个按钮后，（使用top：（px）和right：（px）因为我不知道如何将它放在我想要的位置）它仍然可以正常工作。直到我开始调整窗口大小。背景变小，但按钮类型保持不变。所以它开始四处移动，而另外两个按钮旁边的两个按钮，现在是2个按钮，它们之间有很多空格。在这里，看看我的代码： HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="galaxy3.jpg"> 
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="mercury" src="mercury.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="earth" src="earth.png"> <br>
                (text)<br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="venus" src="venus.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
        </div>          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

CSS

.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 100px 0 0 0;
   width: 100%;
   height: 550px;
   text-align: center;
   color: black;
   background: #DCDCDC;
   position: relative;
}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
    }

    .bannertext {
        font-size: 1.3em;
        line-height: 15px;
    }
    .bannertext h1 {
        font-size: 2em;
    }
    .bannertext2 {
        font-size: 2em;
    }
 .mobileShow { display: none;}
 .mobileHide { display: inline;}
     /* Smartphone Portrait and Landscape */
    @media only screen
        and (max-device-width : 480px){
        .mobileShow { display: inline;}
        .mobileHide { display: none;}
        .planet img{
            height: 200px;
        }
        }
#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: -90px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: 100px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

基本上我想要的是当窗口变小时按钮+按钮内的文本也会调整大小。好像按钮是图像的一部分。

感谢您的时间。 -Michael

Answer 1

您需要将position: relative;属性添加到.bannertext元素。这是当子元素绝对位于相对定位的父元素内时，它确保子元素保持相对于父元素的边界。因此，将CSS中的.bannertext更改为以下内容，它应该可以正常工作。

.bannertext {
    font-size: 1.3em;
    line-height: 15px;
    position: relative;
}

您可能需要更新top和right属性，以便它们重新回到您想要的正确位置。

Answer 2

如果您希望按钮相对于屏幕大小进行缩放，则需要使用相对单位而不是像素来设置它们的样式。您可以使用%相对于其父元素em或rem调整大小，以相对于字体大小调整大小，或者 - 最有可能满足您的需求 - vh或vw分别相对于视口的高度和宽度缩放它们。

假设您的初始样式适用于1140px宽的视口（只是一个任意的起始点），以下CSS可能会让您朝着正确的方向前进：

#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 3vw;
    right: -8vw;
    -webkit-border-radius: .5vw;
    line-height: 4.3vw;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}

如何在调整窗口大小时防止按钮移动

2 个答案: