html - 如何使css表响应？

Question

所有的盒子都水平并排成一条线。当我缩小浏览器以使每个框垂直向下滑动时，如何使其具有响应性？

另外，如何在调整大小时阻止表格单元格缩小，我尝试使用 table-layout: fixed，但它不起作用。

HTML

<div class="container">
   <div class="box">
   <img src="image.gif">
  </div>
   <div class="box">
   <img src="image.gif">
  </div>
   <div class="box">
   <img src="image.gif">
  </div>
   <div class="box">
   <img src="image.gif">
  </div>
   <div class="box">
   <img src="image.gif">
  </div>
</div>

CSS

html, body {
height:100%;
width:100%;
margin:0px;
}

.container {
display:table;
vertical-align:middle;
text-align:center;
}

.box {
width: 32px;
height: 32px;
border: 1px solid #f2f2f2;
display:table-cell;
vertical-align:middle;
}

img {
width: 16px;
height: 16px;
}

Answer 1

您可以使用“最小高度：xx%”和“最大高度：xx%”。
当您使用响应式布局时，请考虑使用 XX% 而不是 XXpx。