Question

由于某种原因，我的CSS和html没有显示在网页上。它仅显示井字游戏的h1标题。我已经写出代码来匹配我的家庭作业列表，但是我缺少了一些东西，并且已经开始了好几次，似乎无法得到我所缺少的东西。也许我读错了作业？

h1 {
  text-align: center;
}

.top {
  padding: 3em;
  float: left;
  height: 100px;
  width: 100px;
  border-bottom: 1px black solid;
}

.middle {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.center {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.bottom {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
}

.row {
  clear: both;
  width: 302px;
  text-align: center;
}

HTML:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">

<div id=b oard>
  <h1>TicTacToe</h1>
  <div class="row 1">
    <div class="top left"></div>
    <div class="top middle"></div>
    <div class="top right"></div>
  </div>
  <div class="row 2">
    <div class="middle left"></div>
    <div class=".center"></div>
    <div class="middle right"></div>
  </div>
  <div class="row 3">
    <div class="bottom left"></div>
    <div class="bottom middle"></div>
    <div class="bottom right"></div>
  </div>
</div>

</html>

Answer 1

在您的代码中，我注意到的第一件事是您试图显示每个项目都比其容器宽的项目，因此，每行中的三列会使行的总宽度溢出，因此它们会相互堆叠。

尝试使用box-sizing: border-box You can read about it here

重要的是：

该作业似乎有些陈旧，因为它提供了使用css以我们不再使用的方式构建电路板的技巧。

float属性实际上不是安排页面元素的最佳方法。由于该属性是很久以前创建的，因此当网站非常不同时，基本上是文本和图像，它的主要目的是将图像排列在文本块内。因此，如果您对它的工作原理一无所知，有时会产生一些非常奇怪的结果。 see this for details

您可以尝试使用flexbox，一旦学习并了解其工作原理，您的生活就会轻松很多！ A complete guide to flexbox

使用flexbox，您可以执行以下操作：

div {
  box-sizing: border-box;
}
.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
  height: 100px;
  background-color: grey;
}
.col {
  flex: 1;
  margin: 10px;
  background-color: blue;
}

 <div id= board>
      <h1>TicTacToe</h1>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
  </div>

我使用了页边距和背景色只是为了便于查看框，您可以根据需要进行更改。

您可以使用CSS Grid layout

来解决此问题。

Answer 2

您犯的一个基本错误是，不同的边框会为这些元素产生不同的高度和宽度，因为1px边框会在高度和宽度上添加，因此一些浮动元素会进入下一行，因为垂直空间太小了1px，无法容纳在同一行中，从而弄乱了预期的布局。（某些元素高度为102，某些像素为101px）

但是，如果您添加box-sizing: border-box，则边框的高度和宽度会包含，因此每个元素的确包括边框在内为100x100px。

这是在下面的代码段中完成的。边界显然仍然不正确，但是现在就由您来解决……

* {
box-sizing: border-box;
}
h1 {
  text-align: center;
}

.top {
  padding: 3em;
  float: left;
  height: 100px;
  width: 100px;
  border-bottom: 1px black solid;
}

.middle {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.center {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.bottom {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
}

.row {
  clear: both;
  width: 302px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">

<div id=b oard>
  <h1>TicTacToe</h1>
  <div class="row 1">
    <div class="top left"></div>
    <div class="top middle"></div>
    <div class="top right"></div>
  </div>
  <div class="row 2">
    <div class="middle left"></div>
    <div class="center"></div>
    <div class="middle right"></div>
  </div>
  <div class="row 3">
    <div class="bottom left"></div>
    <div class="bottom middle"></div>
    <div class="bottom right"></div>
  </div>
</div>

</html>

井字游戏板未显示在网页上

2 个答案: