Question

我试图建立一个西蒙游戏，但我搞乱了CSS。

simon game http://i5.walmartimages.com/dfw/dce07b8c-837a/k2-_c8eba155-7ff4-45e8-86ab-704862d4a446.v1.jpg

我不知道自己的错误，但内联阻止并没有按预期工作：

＆＃13;

    body {
        text-align: center;
    }
    
    #box {
        width: 500px;
        height: 500px;
        border-radius: 100%;
        position: relative;
        margin: auto;
        background-color: #333;
        top: 10vh;
        box-shadow: 0px 0px 12px #222;
    }
    
    #box .pad {
        width: 240px;
        height: 240px;
        float: left;
        left: 0px;
        border: 5px solid #333;
        box-shadow: 0px 0px 2px #222;
        display: inline-block;
        position: absolute;
    }
    
    #topLeft {
        background-color: green;
        border-top-left-radius: 100%;
    }
    
    #topRight {
        background-color: red;
        border-top-right-radius: 100%;
        /*right: 0;*/
    }
    
    #bottomLeft {
        background-color: yellow;
        border-bottom-left-radius: 100%;
    }
    
    #bottomRight {
        background-color: blue;
        border-bottom-right-radius: 100%;
    }

＆＃13;

    <body>

        <h1 id="header">freeCodeCamp JS Simon Game</h1>

	    <div id="box">
            <div class="pad" id="topLeft"></div>
            <div class="pad" id="topRight"></div>
            <div class="pad" id="bottomLeft"></div>
            <div class="pad" id="bottomRight"></div>

		</div>


    </body>

＆＃13;

https://jsfiddle.net/gbs4320m/

我尝试将各种设置混合起来并咨询在线资源，但我无法弄清楚问题。

请帮助!!

提前致谢。

Answer 1

删除绝对位置：

＆＃13;

body {
  text-align: center;
}

#box {
  width: 500px;
  height: 500px;
  border-radius: 100%;
  position: relative;
  margin: auto;
  background-color: #333;
  top: 10vh;
  box-shadow: 0px 0px 12px #222;
}

#box .pad {
  width: 240px;
  height: 240px;
  float: left;
  left: 0px;
  border: 5px solid #333;
  box-shadow: 0px 0px 2px #222;
  display: inline-block;
}

#topLeft {
  background-color: green;
  border-top-left-radius: 100%;
}

#topRight {
  background-color: red;
  border-top-right-radius: 100%;
  /*right: 0;*/
}

#bottomLeft {
  background-color: yellow;
  border-bottom-left-radius: 100%;
}

#bottomRight {
  background-color: blue;
  border-bottom-right-radius: 100%;
}

＆＃13;

<h1 id="header">freeCodeCamp JS Simon Game</h1>
<div id="box">
  <div class="pad" id="topLeft"></div>
  <div class="pad" id="topRight"></div>
  <div class="pad" id="bottomLeft"></div>
  <div class="pad" id="bottomRight"></div>
</div>

＆＃13;

Answer 2

首先，您要设置各种不必要的float:left，position:absolute，left:0px;与inline-block冲突，或者在这种情况下不做任何事情。

因此，让我们删除它们，让#box .pad定义更加简单：

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    display: inline-block;
}

＆＃13;

body {
    text-align: center;
}

#box {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    background-color: #333;
    top: 10vh;
    box-shadow: 0px 0px 12px #222;
}

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    display: inline-block;
}

#topLeft {
    background-color: green;
    border-top-left-radius: 100%;
}

#topRight {
    background-color: red;
    border-top-right-radius: 100%;
    /*right: 0;*/
}

#bottomLeft {
    background-color: yellow;
    border-bottom-left-radius: 100%;
}

#bottomRight {
    background-color: blue;
    border-bottom-right-radius: 100%;
}

＆＃13;

<body>

  <h1 id="header">freeCodeCamp JS Simon Game</h1>

  <div id="box">
    <div class="pad" id="topLeft"></div>
    <div class="pad" id="topRight"></div>
    <div class="pad" id="bottomLeft"></div>
    <div class="pad" id="bottomRight"></div>

  </div>

</body>

＆＃13;

这样可以按正确的顺序排列，但细分市场却在彼此之下。为什么？由于处理inline-block元素之间的空格的方式，请参阅this question。

有很多方法可以解决这个问题的答案，但在你的案例中，最简单的解决方案可能只是float:left而不是display:inline-block。这将显示彼此相邻的元素，并将它们溢出到下一行＆＃34;＆＃34;与display:inline-block类似，但没有间距问题：

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    float:left;
}

＆＃13;

body {
    text-align: center;
}

#box {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    background-color: #333;
    top: 10vh;
    box-shadow: 0px 0px 12px #222;
}

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    float:left;
}

#topLeft {
    background-color: green;
    border-top-left-radius: 100%;
}

#topRight {
    background-color: red;
    border-top-right-radius: 100%;
    /*right: 0;*/
}

#bottomLeft {
    background-color: yellow;
    border-bottom-left-radius: 100%;
}

#bottomRight {
    background-color: blue;
    border-bottom-right-radius: 100%;
}

＆＃13;

<body>

  <h1 id="header">freeCodeCamp JS Simon Game</h1>

  <div id="box">
    <div class="pad" id="topLeft"></div>
    <div class="pad" id="topRight"></div>
    <div class="pad" id="bottomLeft"></div>
    <div class="pad" id="bottomRight"></div>

  </div>

</body>

＆＃13;

Answer 3

您应该在CSS中使用Traceback (most recent call last): File "ssh.py", line 11, in <module> with closing(Write(client.get_transport(), '.')) as scp: NameError: name 'closing' is not defined {/ 1}}。

以下是更新后的链接https://jsfiddle.net/gbs4320m/2/

Answer 4

只需删除position absolute:，就可以了。

内联块并不像div那样正常工作

4 个答案: