Question

首先关闭here is the code。我正在创建一个数学方程式游戏，您应该猜测等式中缺少的运算符。运算符是使用javascript插入的图像，当其中一个运算符图像插入到具有 math-box 类的div中时，div会比所有其他div标记略高。我试图弄清楚为什么会这样，我想我有一个解决方案来制作所有的＆＃34;数学盒＆＃34;围绕相同高度级别的类，即通过浮动。但是，我确实想知道为什么它比其他所有人提升更高

＆＃13;

window.onload = function() {
  var eq = document.getElementById('equation'),
      op = document.getElementById('operator'),
      btn = document.getElementsByTagName('button')[0];

  btn.onclick = function() {
    /*
    var countdown  = setInterval(function(){
    	var timer = document.querySelector('#container h1');
    	var count = parseInt(timer.innerHTML);
    	count--;
    	if(count < 1){
    		clearInterval(countdown);
    		timer.innerHTML = 0;
    		count = 30;
    	}else{
    		timer.innerHTML = count;

    	}
    },1000)
    */
    var param = Math.round(Math.random() * (3 - 1) + 1),
        operand = [], num = [],
        equation = "", result = "",
        mathBox = "", div = "",
        skip, answer,
        add = document.getElementById('add'),
        sub = document.getElementById('sub'),
        divi = document.getElementById('div'),
        multi = document.getElementById('mul'),
        mathAnswer = document.getElementById('answer');
    mathAnswer.innerHTML = "";
    for (var i = 0; i < param; i++) {
      var randomOperator = Math.round(Math.random() * (4 - 1) + 1);
      if (i === 0) {
        equation += num[i] = Math.round(Math.random() * (5 - 1) + 1);
      }
      if (randomOperator === 1) {
        operand[i] = "+";
      } else if (randomOperator === 2) {
        operand[i] = "-";
      } else if (randomOperator === 3) {
        operand[i] = "*";
      } else {
        operand[i] = "/";
      }
      equation += operand[i];
      equation += num[i + 1] = Math.round(Math.random() * (5 - 1) + 1);
    }
    skip = Math.round(Math.random() * (operand.length - 1));
    for (var i = 0; i < num.length; i++) {
      div = "<div class='math-box'>" + num[i] + "</div>";
      if (operand[i] && i != skip) {
        switch (operand[i]) {
          case "+":
            div += "<div class='math-box'>  <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg' /></div>";
            break;
          case "-":
            div += "<div class='math-box'>  <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg' /></div>";
            break;
          case "*":
            div += "<div class='math-box'>  <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg' /></div>";
            break;
          case "/":
            div += "<div class='math-box'> <img src='hhttps://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg' /></div>";
            break;
        }
      } else if (i === skip) {
        answer = operand[skip];
        div += "<div class='math-box'>&nbsp;</div>";
      }
      mathBox += div;
    }
    4 + 7 * 3 / 9 - 2;

    function needDecimal() {
      var decimalDigits;
      /* result = Function("return "+equation);
      result = result();*/
      for (var i = 0; i < num.length; i++) {
        if (i == 0) {
          result = num[i];
          continue;
        }
        if (operand[i - 1] === "+") {
          result += num[i];
        } else if (operand[i - 1] === "-") {
          result -= num[i];
        } else if (operand[i - 1] === "*") {
          result *= num[i];
        } else if (operand[i - 1] === "/") {
          result /= num[i];
        } else {
          continue;
        }
      }
      decimalDigits = result - Math.floor(result);
      if (decimalDigits > 0) {
        result = result.toFixed(1);
      }
      return result;
    }
    result = needDecimal();
    console.log(equation + " = " + result);
    eq.innerHTML = mathBox + " = " + result;
    op.style.display = "block";
    add.onclick = function() {
      if (answer === "+") {
        mathAnswer.innerHTML = "<span id='true'> true</span>";
      } else {
        mathAnswer.innerHTML = "<span id='false'> false</span>";
      }
    }
    sub.onclick = function() {
      if (answer === "-") {
        mathAnswer.innerHTML = "<span id='true'> true</span>";
      } else {
        mathAnswer.innerHTML = "<span id='false'> false</span>";
      }
    }
    multi.onclick = function() {
      if (answer === "*") {
        mathAnswer.innerHTML = "<span id='true'> true</span>";
      } else {
        mathAnswer.innerHTML = "<span id='false'> false</span>";
      }
    }
    divi.onclick = function() {
      if (answer === "/") {
        mathAnswer.innerHTML = "<span id='true'> true</span>";
      } else {
        mathAnswer.innerHTML = "<span id='false'> false</span>";
      }
    }
  }
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

div:before {
  content: "";
  display: table;
  clear: both;
}

body {
  background: #b6b3aa;
  font-family: arial,sans-serif
}

#container {
  width: 90%;
  margin: auto;
  background: white;
  min-height: 600px;
}

#timer {
  width: 100%;
  background: #162d76;
  text-align: center;
  color: white;
}

#timer h1 {
  font-size: 44px;
  padding: 5px 0;
}

.math-box {
  height: 50px;
  width: 50px;
  border: 4px solid black;
  text-align: center;
  line-height: 50px;
  margin: 15px 5px;
  display: inline-block;
}

.math-box img {
  width: 100%;
}

#equation {
  font-weight: bold;
  font-size: 2em;
}

#equation .math-box {
}

#operator {
  font-weight: bold;
  font-size: 2em;
  display: none;
}

#operator .math-box:hover {
  cursor: pointer;
}

#true {
  color: green;
  text-transform: uppercase;
}

#false {
  color: red;
  text-transform: uppercase;
}

＆＃13;

<div id="container">
  <div id="timer"><h1>30</h1></div>
  <button>click</button>
  <div id="equation"></div>
  <div id="operator">
    <div class="math-box" id="add">
      <img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg"/>
    </div>
    <div class="math-box" id="sub">
      <img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg"/>
    </div>
    <div class="math-box" id="div">
      <img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg"/>
    </div>
    <div class="math-box" id="mul">
      <img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg"/>
    </div>
  </div>
  <div id="answer"></div>
</div>

＆＃13;

Answer 1

.math-box {
 vertical-align: top;
}

试试这个

为什么一个内联块元素略高于其他元素

1 个答案: