html - 在一个表中使用两个 Flexbox

问题描述

我正在尝试学习如何使用 flex-box 并遇到了障碍。我似乎无法解决问题。我正在尝试“Flex-box 测试”方面对其内容做出响应，但希望“本周员工”方面有一个固定的位置，但它的内容也是灵活的。但是当我调整它的大小时，我希望“本周员工”这一边总是从右上角开始。

有解决办法吗？有没有关于如何很好地构建 html 和 CSS 代码的教程？或者我应该改用表格吗？

.body {
  background-color: white;
  display: none;
  margin: 0;
  border: 0;
}

.flexbox-container-flex {
  display: flex;
  flex-wrap: wrap;
  vertical-align: top;
  width: 100%;
  border-color: gray;
  background-color: black;
}

.flexbox-container-column {
  display: block;
  width: 100%;
  border-color: gray;
  background-color: black;
}

.flexbox-item {
  border: 5px solid black;
  background-color: gray;
}

.flexbox-item1 {
  height: 400px;
  width: 400px;
}

.flexbox-item2 {
  height: 200px;
  width: 200px;
}

.flexbox-item3 {
  height: 100px;
  width: 100px;
}

.textalignment {
  display: block;
  position: relative;
  text-align: left;
}

<body>
  <div>
    <table>
      <tr>
        <th>
          <h1 class="textalignment">FLEX Box Test</h1>
        </th>
        <th>
          <h1 class="textalignment">EMPLOYEE OF THE WEEK</h1>
        </th>
      </tr>
      <tr>
        <td>
          <div class="flexbox-container-flex">
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
          </div>
        </td>
        <td>
          <div class="flexbox-container-column">
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>

图片：

标签： htmlcssflexbox

html - 在一个表中使用两个 Flexbox

问题描述

解决方案

推荐阅读