如何使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

您可以使用“min-height：xx％”和“max-height：xx％” 当您使用响应式布局时，请考虑使用XX％而不是XXpx。