Question

唯一错误且应该不同的是图片和文字应该在第二行居中。

第二排的两个方框位于外侧太远。

我希望第二行中的两个框正好位于顶部

之间

这是我之前创建的代码：

＆＃13;

html {
  font-size: 62.5%;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #666;
  justify-content: center;
}

.half {
  flex: 0 0 calc(100%/2);
}

.third {
  flex: 0 0 calc(100%/3);
}

.flex-container>* {
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

  <div class="flex-container">

    <div class="third">
      <img src="https://img1.picload.org/image/dapawwpr/unbenannt.png" alt="">
      <p>Lorem ipsum.</p>
    </div>

    <div class="third">
      <img src="https://img1.picload.org/image/dapawwpr/unbenannt.png" alt="">
      <p>Lorem ipsum.</p>
    </div>

    <div class="third">
      <img src="https://img1.picload.org/image/dapawwpr/unbenannt.png" alt="">
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
      <p>Lorem ipsum.</p>
    </div>

    <div class="half">
      <img src="https://img1.picload.org/image/dapawwpr/unbenannt.png" alt="">
      <p>Lorem ipsum.</p>
    </div>

    <div class="half">
      <img src="https://img1.picload.org/image/dapawwpr/unbenannt.png" alt="">
      <p>Lorem ipsum.</p>
    </div>

  </div>

</body>

</html>

＆＃13;

Flexbox：第二排中的两个盒子朝向外侧放置得太远

0 个答案: