以正确的方式显示框和文本

Question

我正在尝试创建一个仪表板，但布局存在问题

我可以将4个文本框和一些文本放在一起，但是我无法在正确的位置获取文本，我需要在中间添加另一个文本框，我不确定该怎么做

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#first,
#second,
#third,
#fourth {
  border: 1px solid white;
  height: 120px;
  width: 120px;
  background: lightgreen;
}

p {
  text-align: center;
  vertical-align: bottom;
  color: black;
}

<h2 align="center">PI Graphs</h2>
<div style="width: 250px; height: 240px; margin-left: 10px">
  <div id="first" style="float: left; border-top-left-radius:10px;">
    <p>Locations Counted</p>
  </div>
  <div id="second" style="float: left; border-top-right-radius:10px;">
    <p>Locations Accurate</p>
  </div>
  <div id="third" style="float: left; border-bottom-left-radius:10px;">
    <p>Serial Not Exist</p>
  </div>
  <div id="fourth" style="float: left; border-bottom-right-radius:10px;">
    <p>Serials Wrong Location</p>
  </div>
</div>

这就是我最终得到的，这是我需要像它的东西

有人可以帮助我实现这一目标

Answer 1

通常，对于这种设计，您最好采用HTML标记，该标记将容器分成多行，但是或者，可以像下面建议的解决方案那样利用flexbox。

由于我们试图保留您使用的标记，为了在图像中创建居中框，我们必须将其从流程中移出，然后使用以下方法居中：

• position: absolute，
• top: 50%，
• left: 50%和
• transform: translate(-50%, -50%)。

代码段：

.container {
  width: 240px;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 10px auto;
}

.box {
  color: #fff;
  height: 120px;
  width: 120px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background-color: #70ad47;
  border: 1px solid #fff;
}

.box.top-row {
  align-items: flex-start;
}

.box.bottom-row {
  align-items: flex-end;
}

.box > p {
  text-align: center;
}

#tl-box {
  border-top-left-radius: 10px;
}
 
#tr-box {
  border-top-right-radius: 10px;
}

#bl-box {
  border-bottom-left-radius: 10px;
}

#br-box {
  border-bottom-right-radius: 10px;
}

#cc-box {
  color: #0c0e0c;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #bbd3b1;
  border: 2px solid #fff;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

<h2 align = "center">PI Graphs</h2>
<div class = "container">
  <div id = "tl-box" class = "box top-row">
    <p>Locations Counted</p>
  </div>
  <div id = "tr-box" class = "box top-row">
    <p>Locations Accurate</p>
  </div>
  <div id = "bl-box" class = "box bottom-row">
    <p>Serial Not Exist</p>
  </div>
  <div id = "br-box" class = "box bottom-row">
    <p>Serials Wrong Location</p>
  </div>
  <div id = "cc-box" class = "box">
    <p>Current Days Accuracy 98%</p>
  </div>
</div>