小贝子编程

100% 宽度未完全扩展到 100%

  • 本文关键字：100% 扩展到 html css
  • 更新时间 :
  • 英文 :


我正在用引导程序制作一个网站，但我遇到了一个问题。当我在其中一个div上使用width：100%时，背景颜色没有完全扩展到100%。它只扩展到 90% 左右(左侧的 5% 和右侧的 5% 显示身体背景颜色(。我感谢任何帮助。

.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>
<script>
    var sound = new Audio();
    sound.src = "rick.mp3";
 </script>
    </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="images/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="images/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="planettext">
                Planets
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mercury.png"> <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 src="images/earth.png"> <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 src="images/venus.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mars.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/jupiter.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/saturn.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/uranus.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/neptune.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
            </div>
                <div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="pluto">
                <div class="plutotext">
                    Poor Pluto
                </div>
                <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</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：

html {
    margin: 0;
}
body {
    background: #DCDCDC;
    width: 100%;
    margin: 0;
}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 0px 0 0 0;
   width: 100%;
   text-align: center;
   color: black;
   position: relative;
}
#firstrow span {
    font-family: Impact, Impact5, Charcoal6, sans-serif;
    font-size: 1.3em;
}
#firstrow p {
    font-family: Helvetica,
}
@media all and (max-width: 2000px) {
    #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -90px;
         line-height: 40px;
    }
}
.planettext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 200px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #DCDCDC;
    font-weight: bold;
}
.plutotext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #D3D3D3;
    font-weight: bold;
    margin: 00;
}
#pluto {
    background-color: #D3D3D3;
    height: 550px;
    width: 100%;
}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
@media all and (max-width: 2000px) {
     #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -70px;
         line-height: 40px;
     }
}
@media all and (max-width: 1450px) {
    #headerbutton-nederlands {
        position: absolute;
        font-size: 14px;
        line-height: 30px;
        right: -55px;
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-nederlands {
        font-size: 13px;
        line-height: 25px;
        right: -55px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-nederlands {
        font-size: 10px;
        line-height: 20px;
        right: -40px;
    }
}
@media all and (max-width: 2000px) {
     #headerbutton-english {
         position: absolute;
         bottom: 0px;
         right: 100px;
         line-height: 40px;
     }
}
@media all and (max-width: 1450px) {
    #headerbutton-english {
        position: absolute;
        font-size: 14px;
        right: 80px;
        line-height: 30px
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-english {
        font-size: 13px;
        line-height: 25px;
        right: 50px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-english {
        font-size: 10px;
        line-height: 20px;
        right: 50px;
    }
}

.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
        margin-bottom: 20px;
    }

    .bannertext {
         font-size: 1.3em;
         line-height: 15px;
         position: relative;
    }
    .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;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

谢谢你的时间。

确保在你的冥王星div 中添加以下内容

                <div class="row"> /* EDIT*/
                <div id="pluto">
            <div class="plutotext">
                Poor Pluto
            </div>
            <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
            <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
            </div>
              </div>   /* EDIT */

这是代码笔的答案

我注意到的一件事是，虽然你使用了引导网格系统，但你从未使用过引导行类，这真是太神奇了。最好使用 boostrap 内置行类，而不是您创建的所有这些类。因此，您的代码看起来很混乱。

html {
    margin: 0;
}
body {
    background: #DCDCDC;
    width: 100%;
    margin: 0;
}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 0px 0 0 0;
   width: 100%;
   text-align: center;
   color: black;
   position: relative;
}
#firstrow span {
    font-family: Impact, Impact5, Charcoal6, sans-serif;
    font-size: 1.3em;
}
#firstrow p {
    font-family: Helvetica,
}
@media all and (max-width: 2000px) {
    #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -90px;
         line-height: 40px;
    }
}
.planettext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 200px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #DCDCDC;
    font-weight: bold;
}
.plutotext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #D3D3D3;
    font-weight: bold;
    margin: 00;
}
#pluto {
    background-color: #D3D3D3;
    height: 550px;
    width: 100%;
}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
@media all and (max-width: 2000px) {
     #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -70px;
         line-height: 40px;
     }
}
@media all and (max-width: 1450px) {
    #headerbutton-nederlands {
        position: absolute;
        font-size: 14px;
        line-height: 30px;
        right: -55px;
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-nederlands {
        font-size: 13px;
        line-height: 25px;
        right: -55px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-nederlands {
        font-size: 10px;
        line-height: 20px;
        right: -40px;
    }
}
@media all and (max-width: 2000px) {
     #headerbutton-english {
         position: absolute;
         bottom: 0px;
         right: 100px;
         line-height: 40px;
     }
}
@media all and (max-width: 1450px) {
    #headerbutton-english {
        position: absolute;
        font-size: 14px;
        right: 80px;
        line-height: 30px
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-english {
        font-size: 13px;
        line-height: 25px;
        right: 50px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-english {
        font-size: 10px;
        line-height: 20px;
        right: 50px;
    }
}
.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
        margin-bottom: 20px;
    }
    .bannertext {
         font-size: 1.3em;
         line-height: 15px;
         position: relative;
    }
    .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;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}
<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>
<script>
    var sound = new Audio();
    sound.src = "rick.mp3";
 </script>
    </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="images/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="images/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="planettext">
                Planets
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mercury.png"> <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 src="images/earth.png"> <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 src="images/venus.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mars.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/jupiter.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/saturn.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/uranus.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/neptune.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
            </div>
                <div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  
                  <div class="row">
                    <div id="pluto">
                <div class="plutotext">
                    Poor Pluto
                </div>
                <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
                </div>
                  </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>

我假设您希望 #pluto 为 100%？

<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div id="pluto">
          <div class="plutotext">Poor Pluto</div>
     </div>
</div>

您可以使用开发工具来检查父div 的宽度和填充吗：.我猜问题就在那里。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium