如何同时使用 p 类和 flexbox答案

【问题标题】：How to use p class and flexbox together如何同时使用 p 类和 flexbox
【发布时间】：2022-09-23 00:24:16
【问题描述】：

我有四个弯曲的容器盒。我想将文本连续放在这些框下方。

任何关于我如何将它们均匀地放在这些容器下的想法，以及任何清理代码的技巧都将不胜感激。

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {}

<div class=\"container\">
  <div class=\"square one\"></div>
  <div class=\"square two\"></div>
  <div class=\"square three\"></div>
  <div class=\"square four\"></div>
</div>
</div>

<div class=\"subtext\">
  <p class=\"sub\">
    <div class=\"box1\">
      Wow !
    </div>
    <div class=\"box2\">
      Wow !
    </div>
    <div class=\"box3\">
      Wow !
    </div>
    <div class=\"box4\">
      Wow !
    </div>
</div>

如果您删除<p class=\"sub\">，它们将被正确调整。此外，您在第 7 行还有一个额外的关闭 </div>。
您的 HTML 需要帮助。你有额外的和未封闭的元素。段落不应包含 div。
有什么理由需要你的潜台词完全不同的结构吗？通常它们会与上面的相应元素一起打包。

标签： html css text flexbox

【解决方案1】：

我会把盒子和文字捆绑在一起。您可以将其分开，但这不太可能出现问题。

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.container>div {
  flex: 1;
  text-align: center;
}

.square {
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

<div class="container">
  <div>
    <div class="square"></div>
    <p>Paragraph 1.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 2.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 3.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 4.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>

<div class="subtext">
  <div class="box1">Wow !</div>
  <div class="box2">Wow !</div>
  <div class="box3">Wow !</div>
  <div class="box4">Wow !</div>
</div>

<p>This is a sample line below the boxes</p>

【讨论】：

一些解释会使这个答案更好。见How to Answer。