Question

我有CSS表（显示：表格）＆gt;内部div（显示：table-cell）＆gt;与内在的imgs。

表格单元格的宽度等于imgs的宽度，但问题是表格单元格的高度不是！它增加了一些额外的（4或5）px。因此，如果我的img是100px（高度），那么table-cell是104px。

HTML

<div class="table">
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
  <div class="table-cell"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""></div>
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
</div>

CSS

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  background: black;
}

请让我知道为什么会发生这种情况以及如何解决？

Answer 1

为图片添加显示属性。

＆＃13;

.table {
  display: table;
}
.table-cell {
  display: table-cell;
  background: black;
}
img {
  display: block;
}

＆＃13;

<div class="table">
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
  <div class="table-cell">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt="">
  </div>
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
</div>

＆＃13;

CSS table-cell height等于img height

1 个答案: