响应2行6盒

Question

如何以3x3模式垂直对齐所有这6个div，以便顶部和底部div内容彼此对齐，使其看起来很好。我试过一些垂直对齐：中间;没有成功。

这是必须100％响应，并且数字也是居中和对齐的，所以无论数字是多少都是对齐的。

＆＃13;

.top-right-container {
 position: absolute;
 border: 1px solid white;
 height: 20%;
 width: 50%;
 right: 0;
 top: 0;
}

.stats-container {
 position: relative;
 float: left;
 border: 1px solid white;
 width: 75%;
 height: 80%;
}

.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
 display: inline-block;
 color: black;
}

.Agility,
.Intelligence {
 float: left;
 margin-left: 10%;
}

.Stamina,
.Strength {
 margin: 0 auto;
}

.Respect,
.Cash {
 margin-right: 10%;
 float: right;
}

.stats-container h2 {
 font-family: Marker-Felt;
 margin: 0;
 font-size: calc(0.7vh + 1.2vw);
}

.stats-container p {
 margin: 5%;
 text-align: center;
 font-size: calc(0.5vh + 0.8vw);
}

.top-stats,
.bottom-stats {
 width: 100%;
 text-align: center;
}

＆＃13;

<div class="top-right-container">
      <div class="stats-container">
        <div class="top-stats">
        <div class="Agility">
          <h2>Agility</h2>
          <p>10</p>
        </div>
        <div class="Stamina">
          <h2>Stamina</h2>
          <p>10</p>
        </div>
        <div class="Respect">
          <h2>Respect</h2>
          <p>10</p>
        </div>
        </div>
        <div class="bottom-stats">
        <div class="Intelligence">
          <h2>Intelligence</h2>
          <p>10</p>
        </div>
        <div class="Strength">
          <h2>Strength</h2>
          <p>10</p>
        </div>
        <div class="Cash">
          <h2>Cash</h2>
          <p>10</p>
        </div>
        </div>
      </div>
    </div>

＆＃13;

Answer 1

您可以使用 Flexbox ：

执行此操作

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.stats-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.top-stats,
.bottom-stats {
  display: flex;
  width: 100%;
  text-align: center;
}

.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
  flex: 1;
}

.stats-container h2 {
  font-size: calc(0.7vh + 1.2vw);
}

.stats-container p {
  font-size: calc(0.5vh + 0.8vw);
}

<div class="top-right-container">
  <div class="stats-container">
    <div class="top-stats">
      <div class="Agility">
        <h2>Agility</h2>
        <p>10</p>
      </div>
      <div class="Stamina">
        <h2>Stamina</h2>
        <p>10</p>
      </div>
      <div class="Respect">
        <h2>Respect</h2>
        <p>10</p>
      </div>
    </div>
    <div class="bottom-stats">
      <div class="Intelligence">
        <h2>Intelligence</h2>
        <p>10</p>
      </div>
      <div class="Strength">
        <h2>Strength</h2>
        <p>10</p>
      </div>
      <div class="Cash">
        <h2>Cash</h2>
        <p>10</p>
      </div>
    </div>
  </div>
</div>

Answer 2

响应2行6盒

以下是您可以使用的一些代码所有div .container 的容器将占用页面的100％，例如。它的 <body> 行 .statRow 将其容器的100％作为容器现在， .box 框将占其父宽度的33％然后添加其中3个33％+ 33％+ 33％将占据容器的99％。

此外，边框通常占用更多空间，因此宽度+边框是其实际宽度通过将元素 box-sizing 变为 border-box 来解决此问题。

.container {
  border: 10px solid black;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
}

.statRow {
  width: 100%;
  display: block;
}

.box {
  color: white;
  display: inline-block;
  text-align: center;
  width: 33%;
  border: 10px solid white;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #222;
}

<div class="container">
  <div class="statBubble">
    <div class="box">
      <h5>Agility</h5>
      <p>10</p>
    </div><!--
    --><div class="box">
      <h5>Strength</h5>
      <p>10</p>
    </div><!--
    --><div class="box">
      <h5>Stat</h5>
      <p>number</p>
    </div>
  </div>
  <div class="statRow">
    <div class="box">
      <h5>Wisdom</h5>
      <p>100</p>
    </div><!--
    --><div class="box">
      <h5>Stat</h5>
      <p>number</p>
    </div><!--
    --><div class="box">
      <h5>Stat</h5>
      <p>number</p>
    </div>
  </div>
</div>

将6个div内容垂直对齐

2 个答案:

响应2行6盒