Question

id="intro"的div应该被隐藏但是显示出来。主container，即"id=myQuiz" div，有width and height 650px和'overflow' set to 'hidden'。现在，如果"class=intro"的div具有margin 660px from the left，则应隐藏它，因为它的边距高于主容器的最大宽度。我的代码如下：

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test Your Knowledge: Saturn</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/quiz.css">
    </head>
    <body>
    <div id="myQuiz">

    <h1>Test your knowledge:<span>Saturn</span></h1>
    <div class="progress"></div>
    <div class="intro"></div>

    <h2>Welcome</h2>
    <p>Click begin to test your knowledge of Saturn</p>
    <p class="btn">Begin</p>
    <div class="question"></div>
    <div class="results"></div>
     </div>
     </body>
     </html>

CSS代码如下：

    @import url(http://fonts.googleapis.com/css?                      family=Titillium+Web:900|Roboto:400,100);

   body { background-color: #fff; padding: 20px; }

   #myQuiz {
 font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
 width: 650px; height: 650px;
 position: relative;
 overflow: hidden;
 color: #fff;
 background: #000 url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100;}
#myQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 40px 0px;}
#myQuiz .btn {
display: inline-block; cursor: pointer; background-color: #c04b01;
color: #fff; text-decoration: none;
padding: 5px 15px; border-radius: 6px;
}

#myQuiz .intro { position: absolute; top:225px; left: 660px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }

以下是我在jsfiddle.net上的代码的链接：

https://jsfiddle.net/h02y8usu/

Answer 1

您应该通过将<div class="intro">属性添加到display: none来隐藏.intro

ID为'intro'的div应隐藏但显示。出了什么问题？

1 个答案: