Question

目前我正在尝试制作一个包含2行的表，每行有5个图像。它嵌套在一个宽度为100％，高度为200px的div中。现在我想要平衡空间，例如。每个表格单元使用20％宽度和50％高度。

图像/单元格正好相当于20％宽度，图像根据容器div宽度进行缩放。不幸的是，它似乎忽略了height属性。当div变宽时，它只会放大图像，无论高度属性如何，而高度应限制在大约100px。

如何让每个表格单元格和图像/内容保持在顶部div的20％宽度和50％高度？我可能遗漏了一些简单的东西，但我找不到它的生命。

这是我的html，css和jsfiddle：https://jsfiddle.net/kav2yan5/

<div class="topbar">
  <div class="logos">
    <table class="logotable">
      <tr class="logorow">
        <td class="logocell"><img src=""></td>
        <td class="logocell"><img src=""></td>
        <td class="logocell"></td>
        <td class="logocell"><img src=""></td>
        <td class="logocell"><img src=""></td>
      </tr>
      <tr class="logorow">
        <td class="logocell"><img src=""></td>
        <td class="logocell"><img src=""></td>
        <td class="logocell"></td>
        <td class="logocell"><img src=""></td>
        <td class="logocell"><img src=""></td>        
      </tr>
    </table>
  </div>
</div>

CSS：

.topbar {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
}
.logotable {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.logocell {
  height: 50%;
  width: 20%;
}
.logocell img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

提前谢谢你，

HTML / CSS表格单元格和/或不尊重继承高度的内容

0 个答案: