css - 如何使用百分比宽度使一行 5 个 <divs> 响应？

Question

我创建了一个由一行五个 float div 组成的小部件，每个包含一个图像。这是 HTML 的精简版:

<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>

这是 CSS 的精简版:

.panel {
display: inline-block;
float: left;
height: 160px;
position: relative;
margin: 8px 25px 0 0;
width: 160px;
}

五个 div 位于一个容器中(原始宽度为 940px - 当屏幕宽度减小到 940px 以下时更改为 width: auto)，左右填充(每边 20 像素)。

我已经使用媒体查询创建了一个响应式样式表，但我现在想让 float 的 div 在宽度减小时适合屏幕。

有人知道我该怎么做吗？

Answer 1

我不确定你在找什么，但也许只使用 calc() 是处理这一切的最佳方式。

.panel {
  float: left;
  height: 160px;
  width: calc(20% - 25px);
  margin: 8px 25px 0 0;  
}

除默认的 static 位置外，您不需要任何其他位置。当您 float 一个元素时，将显示设置为 inline-block 也没有任何意义，因为它更像是一个 block 元素。

对于容器你可能会做这样的事情:

.container {
  width: 940px;
  max-width: 100%;
}

所以这将是一个响应式的东西。

您可以在此处查看calc() 兼容性:http://caniuse.com/calc