Question

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

的jsfiddle

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

这是预期的行为，甚至适合您的班级名称：＆＃34;行中的所有内容＆＃34;应该在一行中。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

（请注意，我已经遗漏了您的display款式和row，因为它们不是答案的必要部分。

如何使我的表格单元格包装在父容器中

1 个答案: