html - 如何让我的表格单元格包裹在父容器内

Question

我希望我的表格单元格适合容器。换句话说，我希望我的单元格环绕父容器。出于某种原因，继续前进，没有任何包装......

JSFIDDLE

https://jsfiddle.net/yLfpjqum/

HTML

<h1>TEST TABLE</h1>

<div class="colAB">
  <div>
    <p>menu goes here...</p>
  </div>
  <div>
    <div class="table">
      <div class="row">
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
        <div class="cell"><img src="" width="125" height="125" alt=""></div>
      </div>
    </div>
  </div>
</div>

CSS

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.colAB {
  width: 70%;
  margin: auto;
  background-color: red;
}

.colAB > div:nth-child(1) {
  float: left;
  width: 300px;
  background-color: black;
}

.colAB > div:nth-child(2) {
  margin-left: 300px;
  background-color: yellow;
}

Answer 1

这是预期的行为，甚至适合您的类名:“行”中的所有内容都应该在一行中。

但很容易获得你想要的效果:只需将 float:left 添加到单元格中即可:

.cell {
  width: 125px;
  height: 125px;
  float: left;
  border: 1px solid #ccc;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

(请注意，我省略了您的display 样式和您的row，因为它们不是答案的必要部分)