代码之家 › 专栏 › 技术社区 › Jamie Eltringham Yassine

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

css html

Jamie Eltringham Yassine · 技术社区 · 6 年前

我可以得到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>

这就是我的结局,这就是我需要的

0 回复 | 直到 6 年前

Angel Politis 6 年前

通常,对于这种设计,最好使用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>