文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么‘500px top：-500px;’不起作用？

问为什么‘500px top：-500px;’不起作用？
EN

Stack Overflow用户

提问于 2021-09-27 05:42:00

回答 2查看 107关注 0票数 2

这就是我所得到的

这就是我想要的

.   //The first picture is what I get.
.   //The second picture is what I want.


const number00 = document.getElementById('number00');
const score = document.getElementById('score');

let numberW=2;
let numberH=2;

function ften(){
  if(numberW<10 && numberH<10){
    number00.textContent='WIDTH:0'+numberW+' , '+'HIGHT:0'+numberH
  } else{
    number00.textContent='WIDTH:'+numberW+' , '+'HIGHT:'+numberH
  }
}

function fpW(){
  if(numberW<10){
    numberW += 1;
    ften()
  }
}

function fnW(){
  if(numberW>2){
    numberW -= 1;
    ften()
  }
}

function fpH(){
  if(numberH<10){
    numberH += 1;
    ften()
  }
}

function fnH(){
  if(numberH>2){
    numberH -= 1;
    ften()
  }
}

function fran(){
  numberW = Math.floor(Math.random() * 9) + 2;
  numberH = Math.floor(Math.random() * 9) + 2;
  ften()
}

function fok(){
  let shape = document.createElement('tr');
  document.body.appendChild(shape);

  let leftsquare = document.createElement("BUTTON");
  let leftsqtext = document.createTextNode('Match the Same Color'); 
  leftsquare.appendChild(leftsqtext);
  document.body.appendChild(leftsquare).setAttribute("class", "ema")
  document.body.appendChild(leftsquare).style.marginLeft =  '310px';
  for(let i = 0; i<(numberW-1);i+=1){
      let squares = document.createElement("BUTTON");
      let sqtexts = document.createTextNode('Match the Same Color'); 
      squares.appendChild(sqtexts);
      document.body.appendChild(squares).setAttribute("class", "ema")
    }
  
  for(let i = 0; i<(numberH-1);i+=1){
    let shape = document.createElement('tr');
    document.body.appendChild(shape);

    let leftsquare = document.createElement("BUTTON");
    let leftsqtext = document.createTextNode('Match the Same Color'); 
    leftsquare.appendChild(leftsqtext);
    document.body.appendChild(leftsquare).setAttribute("class", "flp")
    document.body.appendChild(leftsquare).style.marginLeft =  '310px';
    for(let i = 0; i<(numberW-1);i+=1){
        let squares = document.createElement("BUTTON");
        let sqtexts = document.createTextNode('Match the Same Color'); 
        squares.appendChild(sqtexts);
        document.body.appendChild(squares).setAttribute("class", "flp")
      }
    }
  }

h1 {
    font-size: 1.8em;
}
.htime{
    height: 50px;
}

.image00{
    display: grid;
    grid-template-columns: repeat(4,0fr);
    margin-top: 10px;
    margin-left: -4px;
}

.image00 button{
    width: 75px;
    height: 75px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
    cursor: pointer;
    border:none;
    right:400px;
    border: none;
    display: inline-block;
    font-size: 1.5em;
}
.image00 button:hover{
    color: seashell;
    background-color: black;
}

.lover button{
    width: 150px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
}
.lover button:hover{
    color: seashell;
    background-color: black;
}

.submit button{
    width: 300px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
    display: flex;
}
.submit button:hover{
    color: seashell;
    background-color: black;
}

.vertical {
    border-left: 3px solid black;
    height: 1010px;
    margin-top: -230px;
    position:absolute;
    left: 310px;
}

.score{
    width: 80%;
    height: 100px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
}

#rockcords{
    padding-right:10px
}
/**####################################################################################################*/
.sqsqsq{
    margin-left:310px;
    margin-top: 410px;
    background-color: black;
}

.ema{
    background-color: rgb(107, 187, 31);
    color: seashell;
    width: 100px;
    height: 100px;
    margin-top: -500px;
}

.flp{
    background-color: black;
    color: seashell;
    width: 100px;
    height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="memory00.css"></link>
    <title>memory00</title>
</head>
    <body>
    <div class='lefthand'>
    <h1 id='number00'>WIDTH:02 ,HIGHT:02</h1>
    <div class='image00'>
        <button onclick='fpW()'>+</button>
        <button onclick='fnW()'>-</button>
        <button onclick='fpH()'>+</button>
        <button onclick='fnH()'>-</button>
    </div>
    <div class='lover'>
        <button onclick='fran()'>Random</button>
        <button onclick="fok()">Start Game</button>
    </div>
    </div>
        <div class = "vertical"></div>
        <div class='htime'>
            <h1 id='score'>SCORE:</h1>
        </div>
        <h1 id='time'>TIME:</h1>
    <div class='submit'>
        <button onclick="fsubmit()">Finish Game</button>
    </div>
    <h1 id='rockcords'>RECORDS</h1>
    <script src="memory00.js"></script>
    <!--h1 id='LLTT'>LLTT</h1>
    <h1 id='RRTT'>RRTT</h1>
    <h1 id='MMMM'>MMMM</h1>
    <h1 id='LLBB'>LLBB</h1>
    <h1 id='RRBB'>RRBB</h1-->
    </body>
</html>
<!-- open memory00.html -->

我不知道如何将黑色和绿色的方形按钮移动到应用程序的顶部。我知道我得到了一个利润崩溃的问题，但我不知道如何处理it.Thank你的解决方案。...

javascript

css

margin

回答 2

Stack Overflow用户

发布于 2021-09-27 06:32:34

在JS中创建的HTML结构无处不在。您可以创建元素并将它们直接附加到正文。您需要分别针对每个对象来定位它们。在HTML中添加一个包装器元素，并以JS为目标。

<div id="right-container"></div>

const target = document.querySelector('#right-container');
target.appendChild(document.createElement("BUTTON"));
...

然后，您可以将div.lefthand和div#right-container的大小和位置正确设置为您的结构，并将您创建的元素附加到这些元素中。目前，您在lefthand容器中缩进的所有元素都溢出了，从而将它们之后的所有内容都向下推。

使用margin-top或margin-left时，根本不要移动元素。学习正确的CSS布局for example grids。

票数 0

Stack Overflow用户

发布于 2021-09-27 07:11:17

您的html代码没有任何布局表达式。因此，当您将新项追加到正文中时，您的代码将始终作为新行添加。

因此，您的margin-top: -500px;表达式将不起作用。

我在您的html代码中添加了一些行和列div，并根据新的布局结构更改了js文件。

你可以试试这些代码。

.css文件

h1 {
    font-size: 1.8em;
}
.htime{
    height: 50px;
}

.image00{
    display: grid;
    grid-template-columns: repeat(4,0fr);
    margin-top: 10px;
    margin-left: -4px;
}

.image00 button{
    width: 75px;
    height: 75px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
    cursor: pointer;
    border:none;
    right:400px;
    border: none;
    display: inline-block;
    font-size: 1.5em;
}
.image00 button:hover{
    color: seashell;
    background-color: black;
}

.lover button{
    width: 150px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
}
.lover button:hover{
    color: seashell;
    background-color: black;
}

.submit button{
    width: 300px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
    display: flex;
}
.submit button:hover{
    color: seashell;
    background-color: black;
}

.vertical {
    border-left: 3px solid black;
    height: 1010px;
    margin-top: -230px;
    position:absolute;
    left: 310px;
}

.score{
    width: 80%;
    height: 100px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
}

#rockcords{
    padding-right:10px
}
/**####################################################################################################*/
.sqsqsq{
    margin-left:310px;
    margin-top: 410px;
    background-color: black;
}

.ema{
    background-color: rgb(107, 187, 31);
    color: seashell;
    width: 100px;
    height: 100px;
    margin-top: -500px;
}

.flp{
    background-color: black;
    color: seashell;
    width: 100px;
    height: 100px;
}

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; 
  }

.js文件

const number00 = document.getElementById('number00');
const score = document.getElementById('score');

let numberW=2;
let numberH=2;

function ften(){
  if(numberW<10 && numberH<10){
    number00.textContent='WIDTH:0'+numberW+' , '+'HIGHT:0'+numberH
  } else{
    number00.textContent='WIDTH:'+numberW+' , '+'HIGHT:'+numberH
  }
}

function fpW(){
  if(numberW<10){
    numberW += 1;
    ften()
  }
}

function fnW(){
  if(numberW>2){
    numberW -= 1;
    ften()
  }
}

function fpH(){
  if(numberH<10){
    numberH += 1;
    ften()
  }
}

function fnH(){
  if(numberH>2){
    numberH -= 1;
    ften()
  }
}

function fran(){
  numberW = Math.floor(Math.random() * 9) + 2;
  numberH = Math.floor(Math.random() * 9) + 2;
  ften()
}

function fok(){

  let container =  document.getElementById("container");

  let shape = document.createElement('tr');
  container.appendChild(shape);

  let leftsquare = document.createElement("BUTTON");
  let leftsqtext = document.createTextNode('Match the Same Color'); 
  leftsquare.appendChild(leftsqtext);
  shape.appendChild(leftsquare).setAttribute("class", "ema")
  //shape.appendChild(leftsquare).style.marginLeft =  '310px';
  for(let i = 0; i<(numberW-1);i+=1){
      let squares = document.createElement("BUTTON");
      let sqtexts = document.createTextNode('Match the Same Color'); 
      squares.appendChild(sqtexts);
      shape.appendChild(squares).setAttribute("class", "ema")
    }
  
  for(let i = 0; i<(numberH-1);i+=1){
    let shape = document.createElement('tr');
    container.appendChild(shape);

    let leftsquare = document.createElement("BUTTON");
    let leftsqtext = document.createTextNode('Match the Same Color'); 
    leftsquare.appendChild(leftsqtext);
    shape.appendChild(leftsquare).setAttribute("class", "flp")
    //document.body.appendChild(leftsquare).style.marginLeft =  '310px';
    for(let i = 0; i<(numberW-1);i+=1){
        let squares = document.createElement("BUTTON");
        let sqtexts = document.createTextNode('Match the Same Color'); 
        squares.appendChild(sqtexts);
        shape.appendChild(squares).setAttribute("class", "flp")
      }
    }
  }

.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="memory00.css"></link>
    <title>memory00</title>
</head>
<script src="memory00.js"></script>
    <body>
    <div class='row'>
      <div class='column'>
        <div class='lefthand'>
        <h1 id='number00'>WIDTH:02 ,HIGHT:02</h1>
        <div class='image00'>
            <button onclick='fpW()'>+</button>
            <button onclick='fnW()'>-</button>
            <button onclick='fpH()'>+</button>
            <button onclick='fnH()'>-</button>
        </div>
        <div class='lover'>
            <button onclick='fran()'>Random</button>
            <button onclick="fok()">Start Game</button>
        </div>
        </div>
            <div class = "vertical"></div>
            <div class='htime'>
                <h1 id='score'>SCORE:</h1>
            </div>
            <h1 id='time'>TIME:</h1>
        <div class='submit'>
            <button onclick="fsubmit()">Finish Game</button>
        </div>
        <h1 id='rockcords'>RECORDS</h1>
        
        <!--h1 id='LLTT'>LLTT</h1>
        <h1 id='RRTT'>RRTT</h1>
        <h1 id='MMMM'>MMMM</h1>
        <h1 id='LLBB'>LLBB</h1>
        <h1 id='RRBB'>RRBB</h1-->
      </div>
      <div id='container' class='column'>
      </div>
    </div>
    </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69341697

复制

相似问题

问为什么‘500px top：-500px;’不起作用？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么‘500px top：-500px;’不起作用？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么‘500px top：-500px;’不起作用？
EN