为什么我的CSS边距应用到错误的位置？

Emiel Zuurbier已经给出了有用的回复，我已经重新做了所有的代码，不再有这个问题
.base中的margin-top在CSS中将margin-top应用到屏幕的顶部，我不知道是什么原因导致了这个问题。
使用float是导致问题的原因，但我不知道任何其他方法来使div对齐

play = document.getElementById("play");
game = document.getElementById("game");
work = document.getElementById("work");
stats = document.getElementById("stats");
v1 = document.getElementById("value1");
a1 = document.getElementById("amt1");
var base = {
  lines: 0,
  value: 0,
  text1: "lines of code: ",
  text2: "Value: $"
}
var stat = {
  money: 0,
  level: 0,
  exp: 0,
  need: 0
}
game.style.display = 'none';
play.addEventListener("click", () => {
  play.style.display = 'none';
  game.style.display = '';
});
work.addEventListener("click", () => {
  if (work.innerHTML == "work") {
    work.innerHTML = "stop";
    t1 = setInterval(BW, 1000);
  } else {
    clearInterval(t1);
    work.innerHTML = "work";
  }
});

function BW() {
  base.lines = Math.max(base.lines + 1, 0);
  base.value = Math.max(base.lines * 5, 0);
  a1.innerHTML = base.text1 + base.lines;
  v1.innerHTML = base.text2 + base.value;
}

function update() {
  stats.innerHTML = "Money: " + stat.money + "   " + stat.exp + " / " + stat.exp + "   " + stat.level;
}
upd = setInterval(update, 1000);

body {
  background: #5A5A5A;
  min-height: 100%;
}

.title {
  background: gray;
  width: 100%;
  height: 5%;
  text-align: center;
}

.pb {
  text-align: center;
}

.play {
  background: gray;
  width: 20%;
  height: 4%;
}

.game {
  max-height: 100vh;
}

.side {
  background: gray;
  float: left;
  height: 75vh;
  width: 20%
}

.screen {
  background: #6A6A6A;
  float: right;
  height: 75vh;
  width: 75%;
}

.stats {
  width: 58vmax;
  background: gray;
  text-align: center;
  font-size: 25px;
  float: left;
}

.select {
  font-size: 3vmax;
  margin-left: 5%;
  background: #6A6A6A;
  height: 15%;
  width: 90%;
  margin-top: 5%;
}

.select:hover {
  background: #5A5A5A;
}

.amt1 {
  margin-top: 2%;
  text-align: center;
  font-size: 2vmax;
}

.base {
  margin-left: 5%;
  margin-top: 5%;
  width: 15vmax;
  height: 15vmax;
  background: red;
  text-align: center;
}

.t1 {
  text-align: center;
  font-size: 2vmax;
}

.value1 {
  margin-top: 2%;
  text-align: center;
  font-size: 2vmax;
}

.wrk {
  height: 3vmax;
  width: 6vmax;
  margin-top: 0.2vmax;
  background: #6A6A6A;
  font-size: 2vmax;
}

.wrk:hover {
  background: #5A5A5A;
}

.stuff {
  width: 14.8vmax;
  height: 31.8vmax;
  background: red;
  float: right;
}

<body class="body">
  <h1 class="title">GAME</h1>
  <div class="pb" id="p">
    <button class="play" id="play">play</button>
  </div>
  <div class="game" id="game">
    <div class="side">
      <button class="select">Work</button>
      <button class="select">Workers</button>
      <button class="select">Home</button>
      <button class="select">name</button>
      <button class="select">name</button>
    </div>
    <div class="screen">
      <div class="work">
        <div class="stats" id="stats">stats</div>
        <div class="stuff" id="stuff"></div>
        <div class="base">
          <div class="t1">develop base</div>
          <div class="amt1" id="amt1">lines of code: 0</div>
          <div class="value1" id="value1">value: $0</div>
          <button class="wrk" id="work">work</button>
        </div>
      </div>
      <div class="workers">

      </div>
    </div>
  </div>
</body>

我期待的利润率将适用于以上的方块，而不是以上的统计

当我浏览标记时，似乎所有的定位都是由边距完成的。您可以考虑迁移到flexbox。它将在未来消除许多类似的问题。它将允许以一种它们彼此知道（某种程度上）方式来定位元素。
关于解决方案：.base类中margin-top的问题是由应用于.side和.screen div的float属性引起的。当一个元素被浮动时，它将被从正常的文档流中取出，这可能会影响其他元素的定位。
要在不使用float的情况下实现所需的布局，您可以使用CSS Flexbox。以下是如何修改代码：
1.从.side和.screen类中删除float属性。
2.在.side和.screen div周围添加一个容器div，并给予它一个类，例如.container。
3.将Flexbox属性应用于.container类。

为什么我的CSS边距应用到错误的位置？

1条答案

相关问题

热门标签

最新问答